用JS或jQuery读写HTML元素的data-*属性_wuyujin1997的博客-程序员宅基地

技术标签: jQuery  data  data-*  HTML5  JS  DOMStringMap  dataset  

Intro

HTML5新增了data-*属性。
在这里插入图片描述
而在一些前端框架如Bootstrap中也可以见到data-*属性的应用:
Bootstrap 中data-* 属性的整理和总结

  • jQuery: $(selector).data(name) 得到
  • JS: document.getElementById(selector).dataset 返回值是DOMStringMap类型的对象。
    $(selector)[0].dataset。(jQuery对象[0] 可以得到 DOM对象)

用jQuery读写data-*属性

  • jQuery API
    data(key, value)
    data(obj)
  • Code
    首先,在<head>中引入jQuery依赖(CDN或本地依赖):
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    然后,在<body>中测试代码:
    <p id="p1" data-name="123">用jQuery读写data-*属性</p>
    <script>
        console.log($("#p1").data("name"));  // 读取data-name的属性值(去掉data-前缀)
        $("#p1").data("name", "abc");        // 更新data-name属性值(去掉data-前缀)
        console.log($("#p1").data("name"));  // 再次读取
    </script>
    
    在浏览器中访问页面,查看控制台输出,如下:
    123
    abc
    

用JS读写data-*属性

  • Code
    直接在<bode>中测试代码:

    <p id="p2" data-name="张三">用JS读写data-*属性</p>
    <script>
        var pObj = document.getElementById("p2");   // 获取DOM元素
        console.log(pObj.dataset.name); // 读(DOM元素的dataset属性)
        pObj.dataset.name = "李四";     // 写
        console.log(pObj.dataset.name); // 再次读
    </script>
    

    控制台输出如下:

    张三
    李四
    
  • Web API
    DOMStringMap
    DOM元素.dataset就是DOMStringMap类型,而这个对象中包含了data-*属性名(不包含data-前缀)和值的映射关系。

测试代码:

<p id="p3" data-id="1001", data-name="张三", data-gender="M">测试DOMStringMap</p>
<script>
    var p = document.getElementById("p3");  // 获取DOM元素
    var pMap = p.dataset;   // 获取DOMStringMap对象
    console.log(pMap);
</script>

查看控制台输出:
在这里插入图片描述
也就是说,我们可以向HTML标签自定义多个data-*属性,然后,用DOM元素.dataset这个属性来获取DOMStringMap格式的对象,
这个对象包含我们自定义的data-*属性的名:值对(名自动去掉前缀data-)。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wuyujin1997/article/details/90399783

智能推荐

随便推点