JavaScript中用setAttribute添加自定义data-属性时，属性名须带data-前缀且值必须为字符串；读取推荐用dataset，命名自动转驼峰，存对象需JSON序列化。
在 JavaScript 中，用 setAttribute 给元素动态添加自定义数据属性（即以 data- 开头的属性），核心是：属性名要带 data- 前缀，值必须是字符串。
正确写法：属性名带 data-，值转成字符串
setAttribute 是原生方法，不区分“内置属性”和“自定义属性”，只要传入合法的属性名和字符串值即可。自定义数据属性必须以 data- 开头，且只能包含字母、数字、连字符（-）、下划线（_）、冒号（:）和点号（.）。
- ✅ 正确：
el.setAttribute('data-id', '123') - ✅ 正确：
el.setAttribute('data-user-name', 'Alice') - ✅ 正确：
el.setAttribute('data-config', JSON.stringify({ theme: 'dark' })) - ❌ 错误：
el.setAttribute('id', '123')—— 这是设置内置属性，不是自定义数据属性 - ❌ 错误：
el.setAttribute('data-id', 123)—— 数值会自动转字符串，但显式转更安全，避免隐式转换意外（如null变成"null"）
推荐搭配 dataset 使用（读取更方便）
虽然 setAttribute 可以写 data- 属性，但读取时用 element.dataset 更直观。注意命名映射规则：
-
data-user-id→element.dataset.userId（连字符转驼峰） -
data-api-url→element.dataset.apiUrl -
data-_internal→element.dataset._internal（下划线保留）
写入仍用 setAttribute，读取建议优先用 dataset，语义清晰、无需手动解析。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
常见场景示例
比如给一个按钮绑定用户 ID 和操作类型：
const btn = document.querySelector('#action-btn');
btn.setAttribute('data-user-id', String(42));
btn.setAttribute('data-action', 'delete');
btn.setAttribute('data-timestamp', new Date().toISOString());
<p>// 后续点击时读取
btn.addEventListener('click', () => {
const userId = btn.dataset.userId; // "42"
const action = btn.dataset.action; // "delete"
const time = btn.dataset.timestamp; // "2024-05-20T10:30:00.000Z"
});
注意点：不要用 setAttribute 改写 data-* 的“值对象”
dataset 是只读代理，不能直接赋值对象：
❌ 错误写法：el.dataset.config = { a: 1 }（无效，会被忽略）
✅ 正确做法：始终用 setAttribute('data-config', JSON.stringify(obj)) 存储，用 JSON.parse(el.dataset.config) 读取（确保内容是合法 JSON）。
