data-*

版本：HTML5

一类自定义数据属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript)与HTML之间进行专有数据的交换。所有这些自定义数据属性都可以通过所属元素的HTMLElement接口来访问。HTMLElement.dataset属性可以访问它们。

示例

<h1>Secret agents</h1>

<ul>
    <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>
    <li data-id="97865">Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".</li>
    <li data-id="45732">James Bond, 007: The main man; shaken but not stirred.</li>
</ul>
<style>
.output {
    font: 1rem 'Fira Sans', sans-serif;
}

h1 {
    margin: 0;
}

ul {
    margin: 10px 0 0;
}

li {
    position: relative;
    width: 200px;
    padding-bottom: 10px;
}

li:after {
    content: 'Data ID: ' attr(data-id);
    position: absolute;
    top: -22px;
    left: 10px;
    background: black;
    color: white;
    padding: 2px;
    border: 1px solid #eee;
    opacity: 0;
    transition: 0.5s opacity;
}

li:hover:after {
    opacity: 1;
}
</style>

所有这些自定义数据属性都可以通过所属元素的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>

浏览器支持

所有浏览器都支持data-属性