HTML中关于data-自定义属性的使用

最新推荐文章于 2024-05-19 13:19:14 发布

foryond

最新推荐文章于 2024-05-19 13:19:14 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/foryond/article/details/119645942

版权

以下代码测试了四种情况，即在div中声明的data-属性以及div中没有明确声明而是由JS动态添加的data-自定义属性，设置及使用方法，注意这里获取文档对象使用的是document.getElementById("aMapID")，这里如果使用JQuery的$(“#aMapID”)获取的对象与基本方法获取的对象不同，具体data-属性使用说明如下：

（1）div中没有明确设置data-caption自定义属性，由JS代码使用$("#aMapID").data("caption", "地图")方法设置，log显示，$("#aMapID").data("caption")方法可以正常获取到值，但dd.dataset.caption方法获取不到；

（2）div中没有明确设置data-layerid自定义属性，由JS代码使用dd.dataset.layerid = "图层ID";方法设置，log显示$("#aMapID").data("layerid")与dd.dataset.layerid两种方法均可以获取正确的值；

（3）div中明确设置了data-num自定义属性，由JS代码使用$("#aMapID").data("num", "100");方法设置，log显示$("#aMapID").data("num")的是修改后的值，而 dd.dataset.num获取到的是其初始值；

（4）div中明确设置了data-num2自定义属性，由JS代码使用dd.dataset.num2 = "200";方法设置，log显示$("#aMapID").data("num2")与dd.dataset.num2两种方法都成功获取到了最终修改后的值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="aMapID" data-num="123" data-num2="456">
      <div class="haha">
        <div class="aMap-toolbar" id="aMapToolID">
          <div id="toolText">abc</div>
        </div>
        <div class="aMap-map" id="aMapmapID"></div>
      </div>
    </div>
    <script>
      (function click() {
        let dd = document.getElementById("aMapID");
        $("#aMapID").data("caption", "地图");
        dd.dataset.layerid = "图层ID";
        $("#aMapID").data("num", "100");
        dd.dataset.num2 = "200";

        console.log("**********************************************");
        console.log($("#aMapID").find(".haha").data("caption"));
        console.log("find:", $("#aMapID").find("div"));
        console.log("find Toolbar:", $("#aMapID").find("#aMapToolID"));
        console.log("children:", $("#aMapID").children("div"));

        console.log("caption:", $("#aMapID").data("caption"));
        console.log("caption:", dd.dataset.caption);
        console.log("layerid:", $("#aMapID").data("layerid"));
        console.log("layerid:", dd.dataset.layerid);
        console.log("num:", $("#aMapID").data("num"));
        console.log("num:", dd.dataset.num);
        console.log("num2:", $("#aMapID").data("num2"));
        console.log("num2:", dd.dataset.num2);
        console.log("**********************************************");
      })();
    </script>
  </body>
</html>

log信息如下，本文运行使用Chrome浏览器。

结论：

foryond

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML中关于data-自定义属性的使用

在<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <
复制链接

扫一扫