HTML5自定义属性

：点上面关注免费学习前端知识！

---

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

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

添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对儿的映射。

在这个映射中，每个 data-name 形式的属性都会有一个对应的属性，只不过属性名没有 data- 前缀（比如，自定义属性是 data-myname ，那映射中对应的属性就

是 myname ）。还是看一个例子吧。

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

//取得自定义属性的值

var appId = div.dataset.appId;

var myName = div.dataset.myname;

//设置值

div.dataset.appId = 23456;

div.dataset.myname = “Michael”;

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。