一、什么是DOM对象自定义属性
在HTML标签中，我们可以自定义属性，比如：<div data-id="123">自定义属性</div>，这里的data-id即为自定义属性。
在JavaScript中，我们可以通过DOM对象的dataset属性来读取自定义属性的值。
二、JS读取DOM对象(标签)的自定义属性
1.读取单个DOM对象的自定义属性
通过DOM对象的dataset属性中的键值对读取自定义属性值，示例如下：
<div id="myDiv" data-id="123">自定义属性</div>
var div = document.getElementById("myDiv");
var id = div.dataset.id;
console.log(id); //输出：123
2.读取多个DOM对象的自定义属性
如果需要读取多个DOM对象的自定义属性，可以采用循环遍历所有的DOM对象，示例如下：
<div class="myDiv" data-id="123">自定义属性1</div>
<div class="myDiv" data-id="456">自定义属性2</div>
var divs = document.getElementsByClassName("myDiv");
for (var i = 0; i < divs.length; i++) {
var id = divs[i].dataset.id;
console.log(id);
}
//输出：123
//输出：456
三、示例说明
1.示例一：利用自定义属性实现图片预加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片预加载</title>
<style>
img {
display: none;
}
</style>
</head>
<body>
<img data-src="./image/1.jpg" />
<img data-src="./image/2.jpg" />
<img data-src="./image/3.jpg" />
<img data-src="./image/4.jpg" />
<img data-src="./image/5.jpg" />
<script>
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
var src = imgs[i].dataset.src;
if (src) {
imgs[i].src = src;
}
}
</script>
</body>
</html>
在这个例子中，我们利用自定义属性data-src来保存需要预加载的图片地址，然后通过遍历所有的img标签，将地址赋值给src属性实现了图片的预加载。
2.示例二：根据自定义属性值设置CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>根据自定义属性值设置CSS样式</title>
<style>
.myDiv[data-color="green"] {
color: green;
}
.myDiv[data-color="blue"] {
color: blue;
}
</style>
</head>
<body>
<div class="myDiv" data-color="green">绿色字体</div>
<div class="myDiv" data-color="blue">蓝色字体</div>
</body>
</html>
在这个例子中，我们利用自定义属性data-color来保存需要设置的字体颜色，然后通过设置不同的CSS样式实现了根据自定义属性值设置CSS样式的效果。
以上就是浅谈JS读取DOM对象(标签)的自定义属性的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈JS读取DOM对象(标签)的自定义属性 - Python技术站
微信扫一扫 
支付宝扫一扫 