HTML数据属性：data-* 的妙用
学习使用自定义数据属性存储额外信息，并通过JavaScript轻松获取。 · 难度：入门 · +15XP
一、什么是 data-* 属性
HTML5允许在元素上添加以data-开头的自定义属性，用于存储与页面相关的私有数据，不会影响渲染。例如：<div data-user-id="12345"></div>。
二、命名规则
| 规则 | 示例 |
|---|---|
| 必须以 data- 开头 | data-color |
| 只能包含字母、数字、连字符、点、冒号、下划线 | data-my-value |
| 不能以 xml 开头 | data-xml-info (无效) |
三、JavaScript 访问方式
通过dataset属性可访问所有data属性，连字符自动转为驼峰：
<button id="myBtn" data-info="clicked" data-index="3">点击</button>
<script>
const btn = document.getElementById('myBtn');
console.log(btn.dataset.info); // 'clicked'
console.log(btn.dataset.index); // '3'
btn.dataset.info = 'updated';
</script>四、CSS 中使用 data 属性
利用CSS属性选择器，可以根据data属性值设置样式：
[data-status="active"] {
background-color: green;
color: white;
}
[data-status="inactive"] {
background-color: gray;
}五、实际应用场景
- 存储用户ID、商品ID等标识符
- 标记交互状态（如已点赞）
- 保存配置参数（如动画速度）
<ul>
<li data-product-id="101" data-price="29.9">商品A</li>
<li data-product-id="102" data-price="49.9">商品B</li>
</ul>练习提示：在starter_code中为每个列表项添加data-rating属性（1-5星），然后用JavaScript点击时在控制台输出评分。