JavaScript通过dataset API操作HTML5 data属性，获取时自动转换连字符为驼峰式（如data-user-id→userId），设置时自动同步HTML属性，删除用delete或removeAttribute，需注意命名规范与浏览器兼容性。
JavaScript 操作 HTML5 Data 属性非常直接，核心是通过 dataset API 读写以 data- 开头的自定义属性。
获取 data 属性值
使用元素的 dataset 属性可访问所有 data-* 属性。注意命名规则：带连字符的属性名（如 data-user-id）在 JavaScript 中会转为驼峰式（userId）。
- HTML 示例：
<div id="item" data-user-id="123" data-product-name="Laptop"></div> - JS 获取：
const el = document.getElementById('item'); console.log(el.dataset.userId); // "123" -
el.dataset.productName返回"Laptop"（product-name→productName）
设置 data 属性值
直接对 dataset 对应属性赋值即可，浏览器自动添加或更新对应 data- 属性。
-
el.dataset.status = "active";→ 元素将拥有data-status="active" - 若原属性不存在，会自动创建；若已存在，则覆盖值
- 赋值始终为字符串类型，即使传入数字或布尔值（如
el.dataset.count = 42→data-count="42"）
删除 data 属性
使用 delete 操作符从 dataset 中移除属性，对应 HTML 属性也会被清除。
立即学习“Java免费学习笔记（深入）”；
-
delete el.dataset.userId;→ 移除data-user-id属性 - 也可用
el.removeAttribute('data-user-id')，效果相同但更底层
注意事项与兼容性
dataset 在现代浏览器中支持良好（IE11+，所有主流浏览器），但需注意：
- 属性名不能以数字开头（如
data-1id不合法），也不能含大写字母（data-MyId会被忽略） - 若属性含多个连字符（如
data-first-name-last），转为驼峰时首字母小写，后续每个连字符后字母大写（firstNameLast） - 不推荐用
getAttribute()/setAttribute()替代dataset，除非需要处理特殊命名或旧环境兼容
