HTML5获取自定义数据属性

HTML5   规定可以为元素添加非标准的属性，但要添加前缀  data-  ，目的是为元素提 供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以  data-  开头即可。来看一个例子。

HTML 

<div id=“myDiv” data-appId=“12345” data-myname=“Nicholas” ></div>

添加了自定义属性之后，可以通过元素的  dataset  属性来访问自定义属性的值。 dataset  属性的值是 DOMStringMap  的一个实例，也就是一个名值对儿的映射。在这个映射中，每个  data-name  形式的属性都会有一个对应的属性，只不过属性名没有  data-  前缀（比如，自定义属性是 data-myname ，那映射中对应的属性就是 myname ）。还是看一个例子吧。

JS

//本例中使用的方法仅用于演示

var div = document.getElementById(“myDiv”);

//取得自定义属性的值

var appId = div.dataset.appId;

var myName = div.dataset.myname;

//设置值

div.dataset.appId = 23456;

div.dataset.myname = “Michael”;

//有没有“myname”值呢？

if (div.dataset.myname){

    alert(“Hello, ” + div.dataset.myname);

}

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能方便地知道点击来自页面

中的哪个部分。

好了，今天的文章就到这里，本文由Web前端精髓为您提供，喜欢的同学记得点击收藏或者点赞哦！

上一节

推荐阅读

学习 JavaScript：9 个常见错误阻碍你进步

https://github.com/xitu/gold-miner/blob/master/TODO/learning-javascript-9-common-mistakes.md?utm_source=qq&utm_medium=social

点击“阅读原文”