dataset读取data-*属性为undefined的最常见原因是命名不规范，如data-userId或data_user_id不被浏览器识别，仅支持全小写加连字符（如data-user-id）；此外还有数字开头、双连字符、只读代理、类型转换陷阱及CSS attr()限制等问题。
dataset读取data-*属性时为什么总是undefined
最常见的原因是HTML里写了data-userId或data_user_id，浏览器压根不认——它只解析全小写+连字符的命名，比如data-user-id。一旦命名违规，DOM里就不存在这个属性，dataset.userId自然返回undefined。
还有两类隐蔽问题：
-
data-2024-start这种数字开头的，不能用点号访问，得写element.dataset["2024Start"] -
data-api-endpoint会被转成apiEndpoint，但data-api--endpoint（双连字符）会变成apiEndpoint，语义丢失且不可靠
dataset赋值后DOM没更新，页面刷新就丢数据
dataset是个只读代理，不是双向绑定。你写element.dataset.count = "5"，只是改了内存副本；原始HTML里的data-count值根本没变，刷新后还是旧的。
真正要持久化，必须用原生API：
立即学习“前端免费学习笔记（深入）”；
- 设值：
element.setAttribute('data-count', '5') - 删值：
element.removeAttribute('data-count') - 清空整个dataset：
Object.keys(element.dataset).forEach(k => element.removeAttribute('data-' + k))
混用更危险：先dataset.foo = 'a'，再setAttribute('data-foo', 'b')，后续dataset.foo仍返回'a'——它缓存了初始映射，不会重拉DOM值。
dataset拿到的值永远是字符串，类型转换容易翻车
哪怕HTML里写data-active="false"或data-price="9.99"，dataset.active和dataset.price拿到的仍是字符串"false"和"9.99"。
典型踩坑点：
-
if (element.dataset.active)对"false"也判为真（非空字符串都是truthy） - 直接
element.dataset.price + 1得到"9.991"（字符串拼接） - JSON数据如
data-config='{"mode":"dev"}'，必须手动JSON.parse(element.dataset.config)，且得包try/catch防解析失败
安全转换建议：
- 布尔：
element.dataset.active === 'true' - 数字：
Number(element.dataset.price)或+element.dataset.price - JSON：
try { const cfg = JSON.parse(element.dataset.config); } catch (e) { /* 处理错误 */ }
CSS里用attr(data-*)只能在content里生效，且必须加引号
attr()函数只被允许用在::before和::after伪元素的content属性中，比如content: attr(data-label);。其他地方如color: attr(data-theme);完全无效。
而且值必须是纯文本，不能参与计算，也不能自动转义。如果HTML里写data-label="hello "world""，CSS里content: attr(data-label)会原样输出带引号的字符串，但不会做HTML解码。
更关键的是：选择器匹配[data-status]这类属性选择器时，值不用引号；但attr()里必须写成attr(data-status)，不能加引号，否则语法错误。
真正容易被忽略的是：dataset本身不触发任何DOM变更通知，也不影响CSS重排重绘——它只是个静态快照。想靠它驱动样式变化，得配合JS手动切换class，别指望data属性自己“活”起来。
