<p>HTML 中 data- 属性是唯一标准且跨浏览器安全的自定义数据存储方式，需严格遵循命名规则（小写字母、数字、连字符），JS 中通过 dataset 访问时自动转驼峰式，值恒为字符串，修改后不会反映在 outerHTML 中。</p>
直接用 data- 开头的属性名写在 HTML 标签里就行，这是唯一符合标准、跨浏览器安全的方式。
data-* 属性的命名规则必须遵守
HTML5 明确规定：自定义属性只能以 data- 开头，后面只能跟小写字母、数字、连字符（-），不能有下划线、大写字母或特殊符号。比如 data-user-id 合法，data_userId、data:version、data-User-Name 都不合法。
- 连字符分隔的多词名（如
data-product-price）会在 JS 中自动转为驼峰式dataset.productPrice - 属性值始终是字符串类型；若需存对象或数组，请先
JSON.stringify()再赋值 - 不要试图用
data-模拟布尔属性（如data-active="true"），它不会自动转成 JS 的true，仍是字符串"true"
setAttribute 与 dataset 写法的区别
动态添加时有两个主流方法，但语义和行为不同：
-
element.setAttribute("data-count", "42")：直接写入 HTML attribute，兼容所有浏览器，包括旧版 IE，但不触发dataset的自动命名转换 -
element.dataset.count = "42"：走 HTML5 dataset API，会自动把count映射为data-count，且删除时用delete element.dataset.count，但 IE11 及以下不支持 - 如果要兼容 IE9–10，只能用
getAttribute/setAttribute；现代项目优先用dataset，更简洁、不易拼错
别把自定义属性当 class 或 style 用
data- 属性不是用来控制样式的“快捷入口”，它的唯一职责是携带数据。虽然 CSS 支持 [data-status="pending"] 这类选择器，但滥用会导致样式逻辑和数据逻辑耦合。
立即学习“前端免费学习笔记（深入）”；
- 想控制显示/隐藏？用
hidden属性或class+ CSS - 想配色或尺寸？走
style或 CSS 自定义属性（--main-color），不是data-color - 真正需要的是“这个按钮对应哪个订单 ID”，才该用
data-order-id="789"
最常被忽略的一点：data- 属性一旦写死在 HTML 里，就只是初始值；后续 JS 修改它，不会自动同步到 DOM 的 outerHTML 字符串里——调试时用 console.log(element.outerHTML) 看不到更新后的 data- 值，得用 getAttribute 或 dataset 才能读到实时内容。
