HTML5 引入了 data-* 自定义数据属性，用于在 HTML 元素中存储开发者自定义的数据，而不会影响页面的展示或行为。这些数据可以通过 JavaScript 非常方便地读取和操作，是前端开发中实现“无侵入式数据绑定”的利器。

🔍 一、语法格式说明

<div data-属性名="属性值">内容</div>

要点：

  • 属性名必须以 data- 开头。
  • 属性名只能使用小写字母、数字和短横线（-）。
  • 这些属性不会影响 HTML 的默认样式或行为。

🧪 二、基础示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>data-* 示例</title>
</head>
<body>

  <button id="buyBtn" data-product-id="12345" data-price="199.99">立即购买</button>

  <script>
    const btn = document.getElementById('buyBtn');

    // 获取自定义属性（方法一）
    const productId = btn.getAttribute('data-product-id');
    const price = btn.getAttribute('data-price');

    console.log('商品ID:', productId); // 输出：12345
    console.log('价格:', price);       // 输出：199.99

    // 获取自定义属性（方法二 - dataset）
    const dataset = btn.dataset;
    console.log(dataset.productId); // 输出：12345
    console.log(dataset.price);     // 输出：199.99
  </script>

</body>
</html>

🎯 三、使用场景示例

✅ 1. 列表项绑定 ID 或状态

<ul>
  <li data-id="a1" data-status="active">用户 A</li>
  <li data-id="b2" data-status="pending">用户 B</li>
</ul>

JavaScript 获取：

const items = document.querySelectorAll('li');
items.forEach(item => {
  console.log(item.dataset.id, item.dataset.status);
});

✅ 2. 表单校验提示（自定义提示信息）

<input type="text" id="username" data-error="用户名不能为空">
<button onclick="check()">提交</button>

<script>
function check() {
  const input = document.getElementById('username');
  if (input.value === '') {
    alert(input.dataset.error);
  }
}
</script>

✅ 3. 用于构建组件/插件的数据接口

<div class="chart" data-type="bar" data-url="/api/chart-data"></div>

插件初始化时可以自动读取这些属性进行配置。

📦 四、HTML + JavaScript + CSS 综合小案例

🛒 商品卡片：点击按钮获取商品信息

<div class="product-card" data-id="101" data-name="Apple" data-stock="30">
  <h3>苹果</h3>
  <p>库存：<span class="stock">30</span></p>
  <button onclick="buy(this)">购买</button>
</div>

<script>
function buy(btn) {
  const card = btn.closest('.product-card');
  const name = card.dataset.name;
  const stock = card.dataset.stock;
  alert(`您选择了商品：${name}（库存：${stock}）`);
}
</script>

📌 五、dataset 与 JavaScript 的映射规则

HTML 属性JavaScript 访问方式
data-user-idelement.dataset.userId
data-user-roleelement.dataset.userRole
data-long-valueelement.dataset.longValue

⚠️ 注意：JS 中 dataset 自动将短横线后的字母转为驼峰命名。

✅ 总结

特点说明
安全不影响页面展示
语义数据与元素绑定紧密
灵活可用于 JS 插件初始化、事件处理、状态传递等
简洁不需要额外 DOM 操作就能获取数据

如你有具体场景（如动态商品列表、按钮状态绑定、前端组件初始化等）想使用 data-* 属性，我可以为你量身写一段示例代码。是否需要？