<p>data-* 属性需严格遵循小写字母、数字、短横线命名规则，JS 中通过 dataset 自动转驼峰读取，值恒为字符串须手动转换类型；新增属性必须用 setAttribute，dataset 仅为只读映射；兼容性场景优先使用 getAttribute。</p>
写对命名规则、用对读写方式，data-* 属性就能被 JS 顺滑调用。关键不是“多写”，而是“写准”。
属性名必须以 data- 开头，且只用小写字母、数字和短横线
浏览器只认这种格式，其他写法直接失效：
-
✅ 合法示例：
data-user-id、data-api-url、data-item-index -
❌ 非法示例：
dataUserId（缺短横线）、data_user_id（下划线不转驼峰）、data-123id（数字开头）、data-userName（大小写混用）
特别注意：HTML 中必须全小写+短横线；JS 里才能自动转成 dataset.userId、dataset.apiUrl 这样的驼峰名。
值永远是字符串，需要手动转换类型
哪怕你写 data-count="42" 或 data-active="true"，JS 拿到的仍是字符串：
立即学习“前端免费学习笔记（深入）”；
- 数字用
Number(el.dataset.count)或+el.dataset.count - 布尔值别直接
if (el.dataset.active)（因为"false"也是真值），改用el.dataset.active === "true" - JSON 数据建议用
JSON.parse(el.getAttribute("data-config"))，避免 dataset 驼峰转换干扰键名
首次添加新属性，必须用 setAttribute
dataset 是只读映射，不是双向绑定。想让新属性真正写入 DOM，得靠原生方法：
- 新增属性：
btn.setAttribute("data-action", "edit") - 修改已有属性：
btn.setAttribute("data-status", "saved")（或btn.dataset.status = "saved"，但仅限已存在） - 删除属性：
btn.removeAttribute("data-user-id")，别用delete btn.dataset.userId（无效）
读取推荐 getAttribute，更稳更兼容
尤其在 SSR 场景或需精确匹配属性名时，getAttribute 更可靠：
-
el.getAttribute("data-user-id")原样返回字符串，不转换命名，不依赖 dataset 支持 - IE11 不支持 dataset，但
getAttribute全版本通吃 - 高频读取多个属性时，避免反复访问
dataset触发隐式布局抖动
