推荐使用 dataset api 读写 data-* 自定义属性,它自动处理命名转换且同步 dom;兼容场景可用 getattribute/setattribute;避免点语法或 setattribute 操作非标准属性,布尔属性建议显式赋值并解析。

DOM 元素读取和设置自定义属性,推荐用 dataset API(标准方式),也可用 getAttribute/setAttribute(通用兼容方式),避免直接操作 attr 或点语法。
用 dataset 读写 data- 开头的自定义属性
dataset 专为 data-* 属性设计,自动处理命名转换(如 data-user-id → userId),且是原生对象,读写直观:
- 读取:
element.dataset.userId(对应 HTML 中data-user-id="123") - 设置:
element.dataset.userId = "456",会自动同步到 DOM(变为data-user-id="456") - 删除:
delete element.dataset.userId,或设为undefined/null
用 getAttribute / setAttribute 操作任意自定义属性
适用于所有属性(包括非 data- 的自定义名,如 role、level),也兼容老浏览器:
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
- 读取:
element.getAttribute("data-user-id")或element.getAttribute("level") - 设置:
element.setAttribute("data-user-id", "789")或element.setAttribute("level", "admin") - 移除:
element.removeAttribute("data-user-id")
不要用点语法或 setAttribute 直接操作非标准属性
像 element.myProp = "value" 只是给 JS 对象加属性,不会反映在 HTML 或 DOM 树中;element.setAttribute("myProp", "value") 虽然能写入,但该属性不属于标准规范,部分场景(如 SSR、框架 diff)可能被忽略或丢失。
注意布尔类自定义属性的真假值
data-active 这类无值属性,只要存在即为 true:element.hasAttribute("data-active") 比 dataset.active === "true" 更可靠;若需显式布尔控制,建议统一用 data-active="true" / data-active="false",再用 JSON.parse(element.dataset.active) 解析。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










