<p>data-* 属性必须以 data- 开头，后接字母、数字、连字符或下划线，禁用空格、点号、大写和中文；连字符自动转驼峰，值恒为字符串，新增属性须用 setAttribute，读取推荐 dataset + closest() 事件委托。</p>
data-* 属性怎么写才合法
必须以 data- 开头，后面只能跟字母、数字、连字符 -、下划线 _，不能含空格、点号、大写字母或中文。比如 data-user-id 合法，data-userId 会被转成 dataset.userid（全小写），data-item.123 或 data-用户ID 直接被浏览器忽略。
连字符会自动转驼峰：HTML 中写 data-api-key="v1"，JS 里读就是 el.dataset.apiKey；写 data-foo-bar-baz="x"，就读作 el.dataset.fooBarBaz。
- 别用
data-class、data-id这类和原生属性重名的——虽不报错，但易混淆 - 值永远是字符串，
data-count="42"→el.dataset.count === "42"，不会自动转数字 - 冒号
:理论上允许，但 IE 和部分旧版 WebView 支持差，建议避开
按钮上怎么加 data 参数才好取
直接在 HTML 标签里写死最稳妥：<button data-action="edit" data-row-id="789" data-category="user">编辑</button>。这样渲染后 DOM 就自带数据，不用 JS 动态塞，也避免首次设置失败的问题。
运行时动态加，必须用 setAttribute，不能靠 dataset.xxx = yyy：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
btn.setAttribute('data-action', 'delete') - ❌ 错误：
btn.dataset.action = 'delete'—— 如果data-action原本不存在，DOM 上根本不会生成该属性 - ⚠️ 注意：
dataset只对已存在的data-属性生效，且 IE11 不支持
点击按钮时怎么安全读取这些参数
用事件委托 + closest() 是最健壮的方式，尤其适合表格行内按钮或动态插入的按钮：
document.getElementById('table-container').addEventListener('click', function(e) {
const btn = e.target.closest('[data-action]');
if (!btn) return;
const params = {
action: btn.dataset.action,
rowId: btn.dataset.rowId,
category: btn.dataset.category
};
trackButtonClick(params);
});关键点：
-
e.target.closest('[data-action]')能穿透子元素（比如按钮里有<span>编辑</span>），不用手动parentNode遍历 - 别用
getAttribute('data-action')替代dataset.action—— 前者返回原始字符串，后者自动做命名转换（如data-user-id→dataset.userId） - 如果按钮带
href="#"，记得e.preventDefault()，否则页面跳到顶部，埋点可能没发出去
哪些坑最容易导致参数读不到
常见失效场景不是语法错，而是隐性规则没踩准：
- HTML 里写了
data-user-id="1001"，JS 却写btn.dataset.userid—— 实际要写btn.dataset.userId（连字符变驼峰，首字母小写） - 用
dataset.newParam = 'val'想新增属性，结果 DOM 没反应 —— 必须先setAttribute('data-new-param', 'val') - 把 JSON 字符串塞进
data-payload='{"id":123}'—— 引号容易冲突，且解析需JSON.parse()，出错难定位；应拆成多个data-属性 - 服务端渲染时用了双大写命名，如
data-UserID，浏览器一律转成dataset.userid，JS 里写dataset.UserID拿不到
data-* 是个“秘密口袋”，但它只装字符串，也不自动帮你校验逻辑。参数能读出来，不代表业务上下文就对了——rowId 是不是真对应当前行？category 值有没有拼错？这些得靠结构设计兜底，不能只依赖属性名写对了。
