dataset属性
有时,需要在HTML元素上附加数据,供JavaScript脚本使用。一种解决方法是自定义属性。
<div id="mydiv" foo="bar">
上面代码为div
元素自定义了foo
属性,然后可以用getAttribute()
和setAttribute()
读写这个属性。
var n = document.getElementById('mydiv');
n.getAttribute('foo') // bar
n.setAttribute('foo', 'baz')
这种方法虽然可以达到目的,但是会使得HTML元素的属性不符合标准,导致网页的HTML代码通不过校验。
更好的解决方法是,使用标准提供的data-*
属性。
<div id="mydiv" data-foo="bar">
然后,使用元素节点对象的dataset
属性,它指向一个对象,可以用来操作HTML元素标签的data-*
属性。
var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'
上面代码中,通过dataset.foo
读写data-foo
属性。
删除一个data-*
属性,可以直接使用delete
命令。
delete document.getElementById('myDiv').dataset.foo;
除了dataset
属性,也可以用getAttribute('data-foo')
、removeAttribute('data-foo')
、setAttribute('data-foo')
、hasAttribute('data-foo')
等方法操作data-*
属性。
注意,data-
后面的属性名有限制,只能包含字母、数字、连词线(-
)、点(.
)、冒号(:
)和下划线(_
)。而且,属性名不应该使用A
到Z
的大写字母,比如不能有data-helloWorld
这样的属性名,而要写成data-hello-world
。
转成dataset
的键名时,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。反过来,dataset
的键名转成属性名时,所有大写字母都会被转成连词线+该字母的小写形式,其他字符不变。比如,dataset.helloWorld
会转成data-hello-world
。