数据 | data-* (attribute)

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>

(详见这里)

规范

规范	状态	评论
HTML Living Standard该规范中'data- *'的定义。	生活水平	最新的快照，HTML 5.1没有变化
HTML 5.1该规范中'data- *'的定义。	建议	HTML Living Standard的快照，HTML5没有改变
HTML5该规范中'data- *'的定义。	建议	HTML Living Standard的快照，最初的定义。

浏览器兼容性

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)

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18