HTML data-* 属性

定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性由两部分组成：

  • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

注意：用户代理会完全忽略前缀为 "data-" 的自定义属性。

另请参阅：

HTML 教程：HTML hawari

HTML DOM 参考手册：HTML DOM getAttribute() 方法

Example

Use data-* attributes to embed custom data:

<ul>
  <li data-animal-type="鸟类">喜鹊</li>
  <li data-animal-type="鱼类">金枪鱼</li>
  <li data-animal-type="蜘蛛">苍蝇虎</li>
</ul>

Try it yourself

Syntax

<element data-*="somevalue">

Attribute value

Value Description
somevalue Define the value of the attribute (as a string).

Browser support

Number in the table indicate the first browser version that fully supports the attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6