data-*
尝试一下
所有这些自定义数据属性都可以通过所属元素的 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 数据属性的更深入的教程,请参阅使用数据属性。
规范
Specification |
---|
HTML Standard # attr-data-* |
浏览器兼容性
BCD tables only load in the browser
相关链接
- 所有的全局属性
HTMLElement.dataset
属性允许访问和修改这些值- 使用数据属性