JavaScript 自定义属性

■知识点

    HTML5允许用户为元素自定义属性，但要求添加data-前缀，目的是为元素提供与渲染无关的附加信息，或者提供语义信息。例如：

    <div id="box" data-myid="12345" data-myname="zhangsan" data-mypass="zhangl23"> 自定义数据属性</div>

    添加自定义属性后，可以通过元素的dataset属性访问自定义属性。dataset属性的值是一个DOMStringMap实例，也就是一个名值对的映射。在这个映射中，每个data-name形式的厲性都会有一个对应的属性，只不过属性名没有data-前缀。

    浏览器支持状态：Firefox 6+和Chrome。

■实例设计

下面的代码演示了如何自定义属性，以及如何读取这些附加信息。

var div = document.getElementByld("box");

//访问自定义属性值 

var id = div.dataset.myid; 

var name = div.dataset.myname; 

var pass = div.dataset.mypass;

//重置自定义属性值 

div.dataset.myid = "54321"; 

div.dataset.myname = "lisi";

div.dataset.mypass = "lisi543";

//检测自定义属性

if (div.dataset.myname){

    console.log(div.dataset.myname);

}

虽然上述用法未获得所有浏览器支持，但是仍然可以使用这种方式为元素添加自定义属性，然后使用getAttribute()方法读取元素附加的信息。