data-* 属性是HTML5规范的自定义数据容器，用于在元素上存储渲染无关的元信息；通过dataset接口可驼峰式读写（如data-user-id→dataset.userId），值恒为字符串，不支持对象或函数，旧浏览器需降级使用getAttribute。
data-* 属性是给 HTML 元素塞“私货”的标准方式
它不是装饰，也不是 hack，而是 HTML5 明确规范的自定义数据容器：允许你在任意元素上挂载与渲染无关的元信息，比如 data-user-id="1024"、data-product-sku="A7-B2X"。这些值不会显示、不影响样式，但能被 JavaScript 稳稳读到，且通过 dataset 接口天然支持驼峰访问。
怎么用 dataset 读写才不翻车
直接用 getAttribute() 虽然兼容老浏览器，但写起来啰嗦；而 dataset 更简洁，但有命名陷阱：
-
data-user-id→ 必须写成element.dataset.userId（短横自动转驼峰） -
data-abc-xyz-123→ 对应element.dataset.abcXyz123（数字不触发大写，仅连字符后首字母大写） - 不能含大写字母：
data-UserId是非法的，解析时会被忽略 - 值永远是字符串：
element.dataset.count返回"42"，不是数字 42
哪些场景非用 data-* 不可
当你要把上下文数据和 DOM 节点强绑定，又不想污染全局变量或反复查表时，它就是最优解：
- 列表项点击事件中携带 ID：
<button data-item-id="88">删除</button>，点击时直接取event.target.dataset.itemId - 组件配置外溢：一个轮播图容器用
data-autoplay="true" data-interval="3000"控制行为，JS 初始化时统一读取 - A/B 测试分组标识：
<div data-exp-group="v2">，后续逻辑按此分流，无需额外请求<li>避免内联 JSON 字符串：不要写 <code>data-config='{"theme":"dark"}'，改用多个原子属性更清晰可靠 - 别依赖
dataset存在，先做判断：if ('dataset' in element) { ... } - 兜底用
getAttribute('data-xxx')，但注意要手动处理连字符转换逻辑 - 现代项目（2026 年起）基本可默认支持
dataset，但上线前仍建议查下实际用户浏览器分布
IE 和旧版 Safari 的兼容性现实
dataset 在 IE11 及更早版本完全不支持，Safari ≤ 5.1 也不行。如果你必须兼容这些环境：
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：data-* 值是只读字符串，想存对象或函数？不行。需要序列化/反序列化就得自己处理，别指望浏览器帮你自动 parse。
