data-* 全局属性 是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。

所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问。  HTMLElement.dataset 属性可以访问它们。

 * 可以使用遵循 xml名称生产规则 的任何名称来被替换,并具有以下限制:

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

注意,HTMLElement.dataset 属性是一个DOMStringMap,并且自定义数据属性 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 数据属性的更深入的教程,请参阅使用数据属性

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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

相关链接

文档标签和贡献者

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