首页 > 编程笔记 > JavaScript笔记

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() 方法读取元素附加的信息。

所有教程

优秀文章