浅谈JS读取DOM对象(标签)的自定义属性

2023年6月10日上午11:31 • JavaScript

一、什么是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技术站

浅谈JS读取DOM对象(标签)的自定义属性

相关文章