### [data-* 自定义属性的正确命名与读写规范](https://www.huociguo.com/article/1860)

**Published:** 2026-10-04T03:22:49

**Author:** 米了

**Excerpt:** 📌 自定义数据属性以 前缀开头，是 HTML 全局属性里最常被误用的一项。规范对命名有硬性约束。命名规则：仅允…

📌 自定义数据属性以 `data-` 前缀开头，是 HTML 全局属性里最常被误用的一项。规范对命名有硬性约束。

命名规则：仅允许小写字母、数字与连字符，不能以数字开头，不能含大写字母或下划线。写成 `data-user_id` 或 `data-UserName` 均不合法，浏览器虽不报错，但 JS 无法按预期映射。

![data 属性代码示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-6253568.jpeg)

data-\* 属性写在标签上，供脚本读取

JS 侧通过 `element.dataset` 访问，连字符自动转驼峰：`data-user-id` 对应 `dataset.userId`。⚠️ 返回值恒为字符串，数字需自行转换。修改值要用 `setAttribute('data-x', v)`，直接赋值 `dataset.x = v` 虽可行，但批量同步易出错。

其余注意点：data-\* 不能用于状态管理，它不是响应式数据源；敏感信息切勿塞进 data-\*，源码中明文可见。

**Tags:** data-* 属性, dataset 读写, HTML 数据传递, 全局属性, 自定义属性规范

**Categories:** HTML5

---