JS dataset：获取HTML元素的自定义属性

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

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

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

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

示例

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

var div = document.getElementById("box");
//访问自定义属性值
var id = div.dataset.myid;
var name = div.dataset.myname;
var pass = div.dataset.mypass;
//重置自定义属性值
div.dataset.myid = "66666";
div.dataset.myname = "zhangsan";
div.dataset.mypass = "zhangsan666";
//检测自定义属性
if (div.dataset.myname) {
    console.log(div.dataset.myname);
}

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