<p>推荐使用 dataset API 操作 data- 属性，它自动处理连字符转驼峰命名（如 data-user-id → userId），支持点语法和中括号语法读写，设空字符串保留属性，删除需用 delete，兼容 IE11+。</p>

JavaScript 中获取和设置 DOM 元素的自定义 data- 属性，推荐使用 dataset API，它专为操作 data-* 属性设计，语义清晰、兼容性好（IE11+），且自动处理驼峰命名转换。

用 dataset 读取 data 属性

HTML 中的 data- 属性名会自动转为驼峰格式：连字符后字母大写，连字符被移除。例如 data-user-id → userId，data-api-url → apiUrl。

示例：

<div id="box" data-user-id="123" data-api-url="https://api.example.com"></div>

JS 获取：

立即学习“Java免费学习笔记（深入）”；

• const el = document.getElementById('box');
• console.log(el.dataset.userId); // "123"
• console.log(el.dataset.apiUrl); // "https://api.example.com"
• console.log(el.dataset['userId']); // 同样可访问，支持中括号语法

用 dataset 设置 data 属性

直接赋值即可，会自动映射回对应 HTML 属性（注意：值会被转为字符串）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• el.dataset.userId = '456'; // → data-user-id="456"
• el.dataset.apiVersion = 'v2'; // → data-api-version="v2"
• el.dataset['isReady'] = true; // → data-is-ready="true"

⚠️ 注意：设为 null 或 undefined 不会移除属性；设为空字符串 '' 会保留空值属性。如需删除，用 delete el.dataset.xxx。

删除或检查 data 属性

删除某项：

• delete el.dataset.userId; // 移除 data-user-id 属性

检查是否存在：

• 'userId' in el.dataset // true / false
• el.hasAttribute('data-user-id') // 更通用，适用于所有属性

不推荐但可用的替代方式：getAttribute / setAttribute

也可用原生属性方法操作，但需手动处理连字符命名，不够直观：

• el.getAttribute('data-user-id')
• el.setAttribute('data-user-id', '789')
• el.removeAttribute('data-user-id')

仅在需要操作非标准命名（如含大写字母或特殊符号）或兼容极老浏览器时考虑此方式。