dataset 属性用于读写 HTML 的 data-* 自定义属性，自动转连字符为驼峰命名（如 data-user-id → userId），但值恒为字符串需手动转换，适用于轻量静态 UI 数据，不适用于敏感信息或高频更新场景。
JavaScript 的
dataset
属性用于读写 HTML 元素上的自定义
data-*
属性，是实现 DOM 与数据轻量绑定的常用方式。它自动将连字符命名（如
data-user-id
）转为驼峰命名（
userId
），但需注意命名规则、类型限制和兼容性细节。
dataset 的命名转换规则与读写方式
dataset
不是直接映射属性名，而是按特定规则规范化键名：
去掉
data-
前缀
连字符（
-
）后字母转大写，形成驼峰式（如
data-order-id
→
orderId
）
连续多个连字符或下划线会被统一处理（
data-user-name-v2
→
userNameV2
）
纯数字开头的键名不可用（
data-1id
无效，浏览器会忽略）
读取时直接访问：
element.dataset.userId
；写入也支持赋值：
element.dataset.userId = "123"
，会自动同步到 DOM 属性中。
dataset 存储的数据始终是字符串类型
无论你在 HTML 中写
data-count="42"
还是
data-active="true"
，通过
dataset.count
或
dataset.active
读出的都是字符串，不是数字或布尔值。
立即学习
“
Java免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
需手动转换：+dataset.count、Boolean(dataset.active)、JSON.parse(dataset.config) 等
避免误判：if (element.dataset.enabled === "true") 而非 if (element.dataset.enabled)
复杂结构建议用
JSON.stringify()
存入再解析，但不宜存储大量或嵌套过深的数据
适用场景与使用边界
dataset
适合传递轻量、静态、与 UI 强相关的上下文信息，例如：
列表项的唯一标识：
组件配置开关：
埋点所需业务字段：
不推荐用于：
敏感信息（会暴露在 HTML 源码中）
频繁更新的大块数据（性能开销高于普通 JS 对象）
需要响应式更新的动态状态（应配合 state 管理，而非依赖 dataset 同步）
兼容性与替代方案提示
dataset
在 IE11+ 和所有现代浏览器中均受支持。若需兼容 IE9–IE10，可用
getAttribute('data-xxx')
和
setAttribute('data-xxx', value)
手动处理。
获取全部自定义属性：用
element.attributes
过滤以
data-
开头的项
批量设置：可封装工具函数，自动做驼峰转换与字符串化
框架中（如 Vue/React）优先使用 props 或 data 属性，仅在需要跨框架交互或服务端渲染打标时才用 dataset
