怎么获取HTML5自定义数据属性data的值

来源：互联网 2023-03-17 00:02:05 版权归原作者所有，如有侵权，请联系我们

很多做web开发的小伙伴，不知道怎么使用HTML5的data属性，下面小编就将操作方法演示给大家，供大家参考学习！

工具/原料

打开开发工具，新建一个HTML文件（为了方便给大家演示）

怎么获取HTML5自定义数据属性data的值

1该信息未经授权抓取自百度经验

在HTML标签上设置data属性：

语法：data-*

怎么获取HTML5自定义数据属性data的值

使用原生JS获取自定义数据属性的值

方法：.getAttribute()

例子：document.getElementById("demo1").getAttribute("data-num")

怎么获取HTML5自定义数据属性data的值

打开浏览器开发者工具，点击【console】可以看到我成功的获取到data的值了

怎么获取HTML5自定义数据属性data的值

使用jquery获取自定义数据属性的值

方法：.attr() 或.data()

例子：

1、var a = $("#demo1").attr("data-type");

2、var b = $("#demo2").data("type");

怎么获取HTML5自定义数据属性data的值

打开浏览器开发者工具，点击console查看获取情况：

怎么获取HTML5自定义数据属性data的值

1、新建一个HTML文件

2、在HTML标签上设置data属性

3、使用原生JS：getAttribute()方法获取自定义数据属性的值

4、使用jquery方法：attr() 或data()获取自定义数据属性的值

5、打开浏览器开发者工具检查获取情况

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！