102. 自定义数据属性 data-*

为什么需要 data-*

以前想在 HTML 标签上存点数据，只能用 title 或者自定义属性名：

<!-- 不规范的做法 -->
<div user-id="123" user-role="admin">张三</div>

这样写浏览器不报错，但不是标准做法，还可能和未来的 HTML 属性冲突。

HTML5 规定：以 data- 开头的属性都是合法的，专门用来存自定义数据。

基本用法

<div id="user"
     data-id="123"
     data-name="张三"
     data-role="admin"
     data-created="2024-01-15">
  用户信息
</div>

规则：

• 必须以 data- 开头
• 后面至少跟一个字符
• 命名用小写，多个单词用短横线（data-user-name）

读取和写入

用 dataset（推荐）

const el = document.getElementById("user");

// 读
console.log(el.dataset.id);    // "123"
console.log(el.dataset.name);  // "张三"
console.log(el.dataset.role);  // "admin"

// 写
el.dataset.status = "active";  // 自动变成 data-status="active"

命名转换规则：

HTML 里的 data-user-name 在 JS 里变成 dataset.userName（短横线转驼峰）。

<div data-user-id="100" data-max-score="999">

el.dataset.userId   // "100"  → data-user-id
el.dataset.maxScore // "999"  → data-max-score

用 getAttribute / setAttribute

// 读
el.getAttribute("data-id");    // "123"

// 写
el.setAttribute("data-id", "456");

实用场景

1. 给按钮绑定数据

<button data-action="delete" data-id="42">删除</button>

<script>
  document.querySelector("button").addEventListener("click", function () {
    const action = this.dataset.action;
    const id = this.dataset.id;
    console.log(`${action} 编号为 ${id} 的项`);
  });
</script>

2. 配置轮播图

<div class="carousel"
     data-autoplay="true"
     data-interval="3000"
     data-loop="true">
  <div class="slide">...</div>
</div>

<script>
  const carousel = document.querySelector(".carousel");
  const config = {
    autoplay: carousel.dataset.autoplay === "true",
    interval: Number(carousel.dataset.interval),
    loop: carousel.dataset.loop === "true"
  };
</script>

3. 弹窗触发器

<button data-modal="login">登录</button>
<button data-modal="register">注册</button>

<dialog id="login">登录表单</dialog>
<dialog id="register">注册表单</dialog>

<script>
  document.querySelectorAll("[data-modal]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      const modalId = this.dataset.modal;
      document.getElementById(modalId).showModal();
    });
  });
</script>

data-* 存的都是字符串

dataset 返回的全是字符串。要手动转换类型：

// 字符串转数字
const count = Number(el.dataset.count);

// 字符串转布尔
const active = el.dataset.active === "true";

// 字符串转对象/数组（JSON）
const tags = JSON.parse(el.dataset.tags); // '["html","css"]' → ["html","css"]

和隐藏域对比

以前用 <input type="hidden"> 存数据：

<input type="hidden" name="userId" value="123">

现在可以直接写在元素上：

<div data-user-id="123">...</div>

区别：

• <input type="hidden"> 随表单提交
• data-* 不参与表单提交，只给 JS 用

总结

场景	方案
表单提交的数据	<input type="hidden">
JS 操作用的配置/状态	data-* 属性
存复杂对象	data-* + JSON.stringify/parse