JavaScript中通过dataset读写data-*属性是安全标准方式，需注意连字符转驼峰命名、始终返回字符串、写入时避免非法字符及保留字，并在IE9–10中用getAttribute/setAttribute降级。
JavaScript 中通过 dataset 读写自定义数据属性（data-*）是安全且标准的方式，但需注意命名转换规则和浏览器兼容性。
dataset 的命名自动转换规则
dataset 会将 HTML 中的连字符命名（kebab-case）自动转为驼峰命名（camelCase），这是关键细节：
-
data-user-id→element.dataset.userId -
data-api-key→element.dataset.apiKey -
data-full-name→element.dataset.fullName -
data-abc-123→element.dataset.abc123（数字前的连字符被忽略）
反向赋值也遵循同一规则：设置 element.dataset.userId = "1001"，DOM 中对应生成 data-user-id="1001"。
安全读取数据：空值与类型处理
dataset 始终返回字符串，即使 HTML 中写的是数字或布尔值。不能直接依赖其原始类型：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
<div data-count="42"></div>→el.dataset.count是"42"，不是42 -
<div data-active="true"></div>→el.dataset.active是"true"，不是true
建议按需显式转换：
- 数字：
Number(el.dataset.count) || 0或parseInt(el.dataset.count, 10) - 布尔：
el.dataset.active === "true"（推荐）或JSON.parse(el.dataset.active)（仅当确保值为合法 JSON 字符串时） - JSON 对象/数组：
JSON.parse(el.dataset.config || "{}")，并包裹try...catch防止解析失败
安全写入数据：避免非法字符与保留名
写入 dataset 时，属性名必须符合规范：
- 只允许字母、数字、连字符（
-），且必须以字母开头 - 不能使用 JavaScript 保留字（如
class、for、return），否则会静默失败或报错 - 避免以
data-开头但不含连字符的名称（如dataid），它不会映射到dataset.id，也不触发自定义属性机制
正确示例：
-
el.dataset.productId = "P123"→ 生成data-product-id="P123" -
el.dataset["user-preference"] = "dark"→ 使用方括号支持含特殊字符的键名
兼容性与 fallback 方案
dataset 在 IE11+ 和所有现代浏览器中可用。若需支持 IE9–10，可用 getAttribute/setAttribute 手动处理：
- 读：
el.getAttribute("data-user-id") - 写：
el.setAttribute("data-user-id", "1001") - 删：
el.removeAttribute("data-user-id")
可封装一个轻量工具函数统一处理，兼顾可读性与兼容性。
