在 HTML 中通过 data-* 属性传递自定义数据，是最轻便、最符合语义化规范的做法。但前提是命名必须采用全小写 + 连字符的格式（例如 data-user-id）；在 JavaScript 中读取时，dataset 会自动映射为驼峰写法（userId），而且读取到的值永远是字符串，需要手动做类型转换，否则业务逻辑很容易出现偏差。
直接说结论：在 HTML 里使用 data-* 属性挂载自定义数据，既轻量又语义清晰，但一定要严格遵循“小写 + 连字符”命名规则。读取时，dataset 会自动转成驼峰命名，同时所有属性值都会以字符串形式返回——如果不主动做类型转换，后续判断、计算或交互逻辑很容易出问题。
data-* 属性怎么写才合法？
浏览器只会识别符合规范的 data-* 自定义属性，写法不合法时通常会被静默忽略，JavaScript 中既读取不到，也不会报错，因此这类问题往往很隐蔽，排查成本较高。
- 必须全部使用小写字母，
data-user-id✅，data-userId❌（此时dataset.userId会得到undefined） - 属性名应符合标准格式，像
data-id✅，dataabc❌（不属于合法的data-*属性，会被浏览器忽略） - 不能包含大写字母、空格、下划线或其他特殊字符，像
data_v1、data-user ID都属于无效写法 - 数字可以出现在连字符后，例如
data-v2-url会映射为dataset.v2Url，但部分旧版浏览器兼容性一般，求稳时可优先考虑使用getAttribute
dataset.userId 读不到值？先查命名和大小写
常见问题是：element.dataset.userId 返回 undefined，但用 element.getAttribute('data-user-id') 却能正常拿到值。这通常不是浏览器 bug，而是 HTML 属性名与 JavaScript 映射规则没有对应好。
- 如果 HTML 中写的是
data-user-id="1001"，那么 JS 中必须通过dataset.userId访问（首字母小写，连字符后的字母转为大写） - 如果属性名是
data-api-endpoint，对应读取方式应为dataset.apiEndpoint，而不是dataset.endpoint - 如果遇到带数字开头或命名不规范的属性，比如
data-1st-item，dataset往往无法直接访问，这时建议直接使用getAttribute('data-1st-item') - 调试时不要只看
innerHTML来判断值是否生效，因为dataset属于 DOM 的内存映射，修改后未必会立即在字符串内容中直观体现
点击 li 时读 data-bgc 改背景色，为什么点了没反应？
这是前端开发里很常见的一个应用场景：给 绑定点击事件，再通过 dataset.bgc 修改 style.backgroundColor。如果点击后没有反应，问题通常集中在取值格式、事件目标或作用范围上。
dataset.bgc获取到的是字符串"red"，这种情况可以直接使用；但如果 HTML 中写成data-bgc="255,0,0"，就必须手动拼接为"rgb(255,0,0)"才能赋值给背景色- 如果采用事件委托（例如在
ul上统一监听，而event.target实际指向的是li内部的span），那么event.target.dataset.bgc很可能是undefined，应改用event.target.closest('li[data-bgc]')找到真正携带data-bgc的元素 - 在做排他效果时，清除背景色不建议直接写
li.style.backgroundColor = ''，因为部分浏览器可能保留残留的内联样式，更稳妥的方式是统一使用li.style.removeProperty('background-color')
data-* 存对象或布尔值？别图省事
很多人会把 JSON 字符串直接塞进 data-config='{"theme":"dark"}' 这样的属性中，再通过 dataset.config 读取，结果拿到的其实只是普通字符串，并不是 JavaScript 对象。浏览器不会自动帮你做 JSON.parse，也不会给出报错提示，但后续如果直接访问 config.theme，就只会得到 undefined。
- 如果确实要在
data-*中存放结构化数据，必须显式执行JSON.parse(dataset.config)，并配合try/catch做容错处理，因为 HTML 中哪怕少一个引号，都可能导致解析失败 - 布尔值更容易误判：
data-active="false"读取后是dataset.active === "false"，而在 JS 中if (dataset.active)依然会被当作true（因为非空字符串都为真）——正确写法应明确判断为dataset.active === "true" - 敏感信息如 token、手机号、订单详情等，绝不能放在
data-*属性中，因为这些内容会直接暴露在页面源码里，控制台一行$0.dataset.token就能看到
真正最容易被忽略的一点是：data-* 本质上只是 DOM 元素上的“自定义标记”或“数据标签”，并不是状态管理工具。即使你修改了 dataset.foo，React、Vue 这类框架并不会自动感知，CSS 也不会因此主动更新，更不会触发完整的响应式机制——所以它适合当作轻量级的数据载体来使用，而不应被当成状态仓库或数据库。
