We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。

它是一个DOMString的映射,每个自定义数据属性的一个条目。

请注意,dataset 属性本身可以被读取,但不能直接写入。相反,所有的写入必须是它的“属性”,这反过来表示数据属性。

还要注意,一个HTML data-attribute 及其对应的DOM dataset.property 不共享相同的名称,但它们总是相似的:

  • 在HTML中的一个自定义数据属性的名称以 data- 开头。它只能包含字母,数字和以下字符: dash (-), dot (.), colon (:), underscore (_)  - 但不是任何ASCII大写字母(A到Z)。
  • Javascript 中的一个自定义数据属性的名称是相同HTML属性的名称,但在 camelCase中,没有破折号,点等。

 

自定义的数据属性名称是以 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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 --- --- --- --- ---

 

文档标签和贡献者

标签: 
此页面的贡献者: xgqfrms-GitHub, teoli, ziyunfei, ReyCG_sub, ReyCG
最后编辑者: xgqfrms-GitHub,