HTML5 dataset属性仅读取合法data-前缀自定义属性并转为小驼峰命名，是实时只读映射，修改需用setAttribute；值恒为字符串，需手动类型转换；IE10及以下不支持，服务端渲染时需确认属性实际存在。
HTML5 的 dataset 属性只能读取以 data- 开头的自定义属性，且会自动转换命名格式（如 data-user-id → userId），不能读取普通属性或非 data- 前缀的自定义属性。
data- 属性命名必须符合 HTML 规范
浏览器只把合法的 data- 属性纳入 dataset。非法命名会被忽略，比如含大写字母、下划线或以数字开头：
-
data-user_id→ 不生效（含下划线） -
data-1id→ 不生效（数字开头） -
data-User-ID→ 转为userId（自动小驼峰，但建议全小写+短横线） - 正确写法：
data-user-id→ 可通过el.dataset.userId访问
dataset 是只读映射，修改它不会同步到 DOM
dataset 是对元素 data- 属性的**实时只读映射**，直接赋值无效：
const el = document.querySelector('#btn');
el.dataset.status = 'loading'; // ❌ 不会添加 data-status 属性
console.log(el.getAttribute('data-status')); // null要真正写入 DOM，必须用 setAttribute：
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
立即学习“前端免费学习笔记（深入）”；
el.setAttribute('data-status', 'loading'); // ✅ 正确写法
console.log(el.dataset.status); // 'loading'dataset 值始终是字符串，注意类型转换
即使你在 HTML 里写 data-count="42" 或 data-active="true"，dataset.count 和 dataset.active 返回的仍是字符串 "42" 和 "true"，不是数字或布尔值：
-
Number(el.dataset.count)或+el.dataset.count转数字 -
el.dataset.active === 'true'判断布尔语义（别用Boolean('false')，它返回true） - JSON 字符串需手动
JSON.parse(el.dataset.config)
兼容性没问题，但 IE11 及以下不支持
所有现代浏览器（Chrome 8+、Firefox 6+、Safari 6+、Edge）都支持 dataset；IE11 是最后一个支持它的 IE 版本，IE10 及更早版本完全不支持。若需兼容 IE9–10，必须回退到 getAttribute('data-xxx') 手动解析。
真正容易被忽略的是：当服务端渲染或框架（如 Vue/React）动态生成元素时，data- 属性可能未被正确注入，导致 dataset 为空——此时应先检查 el.outerHTML 确认属性是否存在，而不是直接假设 dataset 有值。
