HTML data属性必须以data-开头，后接小写、数字或连字符；dataset读取值全为字符串，需手动类型转换；IE10及以下需用getAttribute/setAttribute兼容。
data属性的命名规则和写法
HTML 的 data- 属性必须以 data- 开头，后接小写字母、数字、连字符（-），不能含大写字母、下划线或空格。浏览器会自动把连字符转为驼峰（如 data-user-id → dataset.userId），但命名时仍要严格用小写+短横线。
-
data-user-id="123"✅ 合法 -
data-userId="123"❌ 不会被识别为 data 属性（会被忽略） -
data-user_id="123"❌ 下划线不被支持 -
data-User-ID="123"❌ 大写字母会导致部分旧版 Safari 解析异常
通过 HTML 静态写入和 JS 动态设置
静态添加直接在标签里写；动态设置推荐用 dataset（语义清晰、自动处理连字符）而非 setAttribute（需手动拼接 data- 前缀）。
<div id="item" data-category="book" data-price="29.9"></div>
JS 中读写：
- 读取：
el.dataset.category→"book"；el.dataset.price→"29.9" - 写入：
el.dataset.status = "sold"→ 自动渲染为data-status="sold" - 避免：
el.setAttribute("dataStatus", "sold")→ 这个属性不会进dataset，且不符合规范
dataset 读取时的类型陷阱
dataset 返回的**全是字符串**，哪怕你写的是数字或布尔值。比如 data-count="0" → el.dataset.count 是 "0"（字符串），不是数字 0；data-active="false" → el.dataset.active 是 "false"，不是布尔 false。
立即学习“前端免费学习笔记（深入）”；
- 需要数值时：显式转换，如
Number(el.dataset.count)或+el.dataset.count - 需要布尔判断时：别直接
if (el.dataset.active)—— 因为"false"是真值；建议用el.dataset.active === "true" - 空值注意：
data-loaded=""→el.dataset.loaded是空字符串""，不是undefined
兼容性与性能提醒
dataset 在 IE11+ 和所有现代浏览器都可用，但 IE10 及更早版本不支持 —— 如果必须兼容 IE10，改用 getAttribute("data-xxx") 和 setAttribute("data-xxx", val)。
- 性能上无明显差异，
dataset是原生 API，比反复调用getAttribute略快 - 大量频繁更新多个 data 属性时，避免逐个赋值
dataset.a = ...; dataset.b = ...，可先操作对象再批量写入（但注意dataset是只读代理，无法直接赋整个对象） - 真正容易被忽略的是：服务端渲染或框架（如 Vue/React）注入的 data 属性，如果值含引号、换行或特殊字符，没做 HTML 转义会导致解析失败或 XSS 风险
