HTMLElement.dataset
属性允许我们访问所有在元素上自定义的data属性 (这种属性一般以data-开头). 它的结构是一个DOMString映射表,对每一个自定义的数据属性都有一个实体与之对应。
自定义的数据属性名称是以 data-
开头的。 它必须要遵循 the production rule of xml names 规则,该规则是说它只可以包含字母,数字和下面的字符: dash (-
), dot (.
), colon (:
), underscore (_
)。此外不应包含ASCII 码大写字母。
自定义的data 属性名称转化成 DOMStringMap
的键值时会遵循下面的规则:
- 前缀
data-
被去除(包括减号); - 对于每个在ASCII小写字母
a到
z前面
的减号 (U+002D
),减号会被去除,并且字母会转变成对应的大写字母。 - 其他字符(包含其他减号)都不发生变化
与此相反的转换,即将键值转换为一个属性的名称,会遵循下面的规则:
- 约束:减号在转变前一定不能紧跟一个ASCII小写字母
a
到z之间;
- 添加
data-
前缀; - 任何ASCII大写字母
A
到Z
将转化成一个减号紧跟对应的小写字母; - 其他字符不会发生变化
上面规则的约束是为了保证这两种转换是正好相反的转换。
例如,属性名称 data-abc-def
与键值 abcDef 相对应。
语法
string = element.dataset.camelCasedName; element.dataset.camelCasedName = string;
实例
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe </div> var el = document.querySelector('#user'); // el.id == 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateOfBirth === '' el.dataset.dateOfBirth = '1960-10-03'; // set the DOB. // 'someDataAttr' in el.dataset === false el.dataset.someDataAttr = 'mydata'; // 'someDataAttr' in el.dataset === true
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 8 | 6.0 (6.0) | 11 | 11.10 | 6 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | --- | --- | --- | --- | --- |