element.dataset可直接读写data-*属性,自动连字符转驼峰命名,如data-user-id→userId;仅映射data-开头属性,非法命名被忽略;IE9–10需用getAttribute/setAttribute兜底。

直接用 element.dataset 就能读写 data-* 属性,它会自动把连字符转成驼峰命名,不用手动解析字符串。
读取 data-\* 属性值
HTML 中写 data-user-id="123" data-page-url="https://example.com",JS 里通过 dataset 对象按驼峰名访问:
-
element.dataset.userId→"123" -
element.dataset.pageUrl→"https://example.com" -
dataset只映射以data-开头的属性,其他自定义属性(如foo="bar")不会出现 - 如果属性名含数字或多个连字符(如
data-item-2-name),浏览器会转成item2Name,不是item2name
修改 data-\* 属性值
赋值即可更新 DOM 属性,也会同步反映在 HTML 上:
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
-
element.dataset.userId = "456"→ DOM 中变成data-user-id="456" -
element.dataset.newFlag = "true"→ 自动添加data-new-flag="true" - 设为
null或undefined会移除该属性;设为空字符串""则保留data-xxx=""
注意大小写和特殊字符
dataset 对属性名做了标准化处理,需按规则匹配:
立即学习“Java免费学习笔记(深入)”;
-
data-My-ID→ 实际对应dataset.myId(全小写 + 驼峰),不是myID或MyId -
data-_prefix和data-123start这类非法命名会被忽略(不符合 HTML 规范的 attribute 名) - 若需动态读取不确定的 key(比如循环处理所有
data-属性),可用Object.keys(element.dataset)或遍历element.attributes
兼容性与替代方案
dataset 在 IE11+、Edge、Chrome、Firefox、Safari 均支持,移动端也无问题。老项目若需兼容 IE9–10,可用原生方法兜底:
- 读取:
element.getAttribute('data-user-id') - 写入:
element.setAttribute('data-user-id', '789') - 删除:
element.removeAttribute('data-user-id')

















