HTML data-* 语法
在 HTML 中，data-* 用于实现元素的自定义属性，它允许我们在所有 HTML 元素上嵌入自定义数据，然后提供给 JavaScript 进行操作。
语法：
<element data-*="取值" >说明：
“data-” 只是一个前缀，它后面接的是一个小写的字符串，例如 data-color、data-article-title 等。data-* 属性的值可以是任何字符串。
在使用 data-* 属性时，要特别注意以下 2 点。
- data-* 属性的名称必须以 “data-” 前缀开头。
- 除了 “data-” 的其余部分可以包含字母、数字、中划线和下划线，但不能包含空格或其他特殊字符。
HTML data-* 摘要
| 属于 | HTML 属性 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML data-* 示例
接下来，我们通过几个简单的例子来讲解一下 HTML data-* 属性是如何使用的。
示例 1：data-* 属性的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p data-color="red">你的努力程度之低，根本轮不到拼天赋。</p>
<script>
const oP = document.getElementsByTagName("p")[0];
oP.style.color = oP.dataset.color;
</script>
</body>
</html>页面效果如下图所示。
分析：
我们可以使用 DOM 操作中的 obj.dataset.xxx 来获取 data-* 属性的值。其中，obj 是一个 DOM 对象，xxx 是 “data-” 的后缀字符串。可能有些小伙伴对具体操作还不是很理解，我们再多举一个例子。
示例 2：data-* 属性的实际应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li data-fruit-price="￥6.5">苹果</li>
<li data-fruit-price="￥12.5">香蕉</li>
<li data-fruit-price="￥3.5">西瓜</li>
</ul>
<script>
const oLi = document.getElementsByTagName("li");
for(let i = 0; i < oLi.length; i++) {
let result = `${oLi[i].innerText}：${oLi[i].dataset.fruitPrice}斤`;
console.log(result);
}
</script>
</body>
</html>页面效果如下图 1 所示，控制台输出如下图 2 所示。
分析：
在使用 JavaScript 获取 data-* 属性值时，小伙伴们要注意一下书写格式。
- 如果是 data-xxx 格式，则应该写成 obj.dataset.xxx。例如 data-color 应该写成 obj.dataset.color，而 data-content 应该写成 obj.dataset.content。
- 如果是 data-xxx-yyy，则应该写成 obj.dataset.xxxYyy。例如 data-fruit-price 应该写成 obj.dataset.fruitPrice，而 data-animal-type 应该写成 obj.dataset.animalType。
示例 3：data-* 属性配合 CSS 使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li {
cursor: pointer;
margin-bottom: 10px;
}
/* 默认情况下不显示，只有鼠标悬停时才显示 data-role 的值 */
li:hover::after {
content: " — " attr(data-role); /* 取出属性值，并加个破折号 */
color: #ff4400;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li data-role="管理员">张三</li>
<li data-role="VIP会员">李四</li>
<li data-role="普通用户">王五</li>
</ul>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移动到元素上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们并没有使用任何 JavaScript 代码。通过 CSS 的 attr(data-role) 函数，我们直接获取了 div 元素上 data-role 的属性值，并将其显示在了 ::after 伪元素中。
提示: 使用 data-* 实现的自定义属性在实际项目中用得比较多，比如在使用 Vue 开发的项目中，通过浏览器查看页面源码就可以看到很多 data-xxx 的东西。
