data-* (attribute) - [ HTML 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

directory search

Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

characters

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)

Previous article： Next article：