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>

(详见 这里)

demo

```html

<div class="oop-data-test" data-obj='{"uid":"007","name":"hacker","age":"unkown","address":"UFO"}'>

</div>

```



```js

// data-obj='{"uid":"007","name":"hacker","age":"unkown","address":"UFO"}'

// Object (must be , data-obj=`{"key":"value"}`)



let test = document.querySelector('[data-obj*="uid"');​​​​​​​

let data_obj = JSON.parse(test.dataset.obj);​​​​​​​

```
​​​​​​​

规范

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

浏览器兼容性

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