data-*

版本：HTML5

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

示例

Secret agents

• Jason Walters, 003: Found dead in "A View to a Kill".
• Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".
• James Bond, 007: The main man; shaken but not stirred.

.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; }

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

浏览器支持

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com