MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

data-* 全局属性 构成一类名称为自定义数据属性的属性,允许通过脚本在HTML 和其 DOM 表示之间交换专有信息。所有这些自定义数据都可以通过属性设置的元素的 HTMLElement 接口来访问。  HTMLElement.dataset 属性可以访问它们。 * 可以使用遵循 xml名称生产规则 的任何名称来被替换,并具有以下限制:

  • 该名称不能以xml开头,无论这些字母用于什么情况;
  • 该名称不能包含任何分号 (U+003A);
  • 该名称不能包含A至Z的大写字母。

注意,HTMLElement.dataset 属性是一个StringMap,并且自定义数据属性 data-test-value 可以通过 HTMLElement.dataset.testValue ( 或者是 HTMLElement.dataset["testValue"] )  来访问,任何破折号(U+002D) 都会被下个字母的大写替代(驼峰拼写)。

示例

通过添加 data-* 属性,即使是普通的 HTML 元素也能变成相当复杂且强大的编程对象。例如,在游戏里的太空船 "sprite" 可以是一个带有class属性和几个data-*属性的简单 <img> 元素:

<img class="spaceship cruiserX3" src="shipX3.png"
  data-ship-id="324"   data-weapons="laserI laserII"   data-shields="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()"
</img>

(详见 这里)

规范

Specification Status Comment
WHATWG HTML Living Standard
data-*
Living Standard No change from latest snapshot, HTML5.1
HTML5.1
data-*
Recommendation Snapshot of WHATWG HTML Living Standard, no change from HTML5
HTML5
data-*
Recommendation Snapshot of WHATWG HTML Living Standard, initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 6 (6) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 6.0 (6) (Yes) (Yes) (Yes) (Yes)

相关链接

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub, kameii, FredWe
 最后编辑者: xgqfrms-GitHub,