目录搜索
Attributesaccesskey (attribute)class (attribute)contenteditable (attribute)contextmenu (attribute)data-* (attribute)dir (attribute)draggable (attribute)dropzone (attribute)Global attributeshidden (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)Elementsaabbraddressareaarticleasideaudiobbasebdibdoblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1headheaderhrhtmliiframeimginputinput type="button"input type="checkbox"input type="color"input type="date"input type="datetime"-localinput 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"inskbdlabellegendlilinkmainmapmarkmenumenuitemmetameternavnoscriptobjectoloptgroupoptionoutputpparampicturepreprogressqrprtrtcrubyssampscriptsectionselectslotsmallsourcespanstrongstylesubsummarysuptabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbrMiscellaneousAttributesBlock-level elementsCORS enabled imageCORS settings attributesElementInline elementsKinds of HTML contentLink typesMicrodataOptimizing your pages for speculative parsingPreloading contentReferenceSupported media formatsUsing the application cacheObsoleteacronymappletbasefontbigblinkcentercommandcontentdirelementfontframeframesethgroupimageinput type="datetime"isindexkeygenlistingmarqueenextidnoframesplaintextstrikettxmp
文字

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)

上一篇:下一篇: