HTML 数据-* 属性

HTML 数据-* 属性（data-* attributes）是用户自定义的属性，可用于存储有关页面或文档的私有定制数据。

语法

数据-* 属性具有以下语法：

<div data-property-name="property-value"></div>

其中，property-name 表示自定义属性名，可以根据自己的需求设置，但是属性名必须以 data- 开头，property-value 表示属性值，可以是任何字符串。

使用

数据-* 属性可以通过 JavaScript 脚本使用，也可以在 CSS 样式中使用。

JavaScript

使用 JavaScript 获取数据-* 属性的值：

var element = document.querySelector("div");
var propertyValue = element.dataset.propertyName;

使用 JavaScript 设置数据-* 属性的值：

var element = document.querySelector("div");
element.dataset.propertyName = "new value";

CSS

使用 CSS 获取数据-* 属性的值：

div::before {
  content: attr(data-property-name);
}

使用 CSS 设置数据-* 属性的值：

div::before {
  content: attr(data-property-name);
  data-property-name: "new value";
}

注意事项

• 属性名必须以 data- 开头。
• 属性名中不允许使用大写字母。
• 不能在一个元素上使用相同的属性名。