一、自定义数据属性的定义和用途

在 HTML 中，以`data-`开头的属性是自定义数据属性。这些属性主要用于在 HTML 元素中存储页面或应用程序的私有自定义数据。这种方式可以让开发者将与元素相关的额外信息直接嵌入到 HTML 标记中，方便 JavaScript 等脚本语言获取和使用这些数据。

例如，在一个包含产品列表的网页中，对于每个产品元素，可能需要存储产品编号、价格等数据，这些数据可以通过`data-`属性来存储。

二、语法规则

`data-`属性的名称应该是全部小写字母，并且如果属性名包含多个单词，单词之间应该用连字符（`-`）分隔。例如，`data-product-id`、`data-user-age`。属性的值可以是任何字符串，根据具体的应用场景来定义。

三、在 JavaScript 中的使用

1. 获取`data-`属性的值

可以使用`dataset`对象或者`getAttribute`方法来获取`data-`属性的值。

1.1 `dataset`对象（推荐）

在现代浏览器中，`dataset`对象提供了一种方便的方式来访问`data-`属性。`dataset`对象的属性名是`data-`属性名去掉`data-`前缀，并将连字符后的单词首字母大写。例如，对于`data-product-id`属性，在 JavaScript 中可以通过`element.dataset.productId`来访问。以下是一个简单的示例：

<div id="product" data-product-id="12345" data-product-price="9.99"></div><script>const productElement = document.getElementById("product");const productId = productElement.dataset.productId;const productPrice = productElement.dataset.productPrice;console.log("产品编号:", productId);console.log("产品价格:", productPrice);</script>

1.2 `getAttribute`方法

这是一种比较传统的方法，通过`getAttribute`函数来获取`data-`属性的值。对于上面的例子，也可以这样获取数据：

<div id="product" data-product-id="12345" data-product-price="9.99"></div><script>const productElement = document.getElementById("product");const productId = productElement.getAttribute("data - product - id");const productPrice = productElement.getAttribute("data - product - price");console.log("产品编号:", productId);console.log("产品价格:", productPrice);</script>

2. 设置`data-`属性的值

可以使用`setAttribute`方法或者直接通过`dataset`对象来设置`data-`属性的值。

2.1 使用`setAttribute`方法

例如，要修改上面产品元素的价格属性：

<div id="product" data-product-id="12345" data-product-price="9.99"></div><script>const productElement = document.getElementById("product");productElement.setAttribute("data-product-price", "10.99");const newPrice = productElement.getAttribute("data-product-price");console.log("新的产品价格:", newPrice);</script>

2.2 通过`dataset`对象（部分浏览器支持）

在支持的浏览器中，可以像操作普通对象属性一样设置`data-`属性的值。例如：

<div id="product" data-product-id="12345" data-product-price="9.99"></div><script>const productElement = document.getElementById("product");productElement.dataset.productPrice = "11.99";const newPrice = productElement.dataset.productPrice;console.log("新的产品价格:", newPrice);</script>

四、在 CSS 中的使用

可以使用属性选择器在 CSS 中选择具有特定`data-`属性的元素。例如，要选择所有具有`data-category="electronics"`属性的元素，并设置它们的背景颜色

[data-category="electronics"] {background-color: lightblue;}

也可以根据`data-`属性的值来应用不同的样式。例如，对于具有`data-priority`属性的任务元素，根据属性值设置不同的文本颜色：

[dats-priority="high"] {color: red;}[data-priority="medium"] {color: orange;}[data-priority="low"] {color: green;}