自定义数据属性

1. data-* 属性概述

<div id="user" data-user-id="123" data-role="admin" data-login-count="42">用户信息</div>

命名规则：以 data- 开头，后续只能包含小写字母、数字和连字符。

2. JavaScript 访问

dataset 属性

const el = document.getElementById('user');
el.dataset.userId; // "123"（连字符转驼峰）
el.dataset.role; // "admin"
el.dataset.active = 'true'; // 设置
delete el.dataset.role; // 删除

getAttribute / setAttribute

el.getAttribute('data-user-id'); // "123"
el.setAttribute('data-user-id', '456');

3. CSS 访问

[data-role='admin'] {
  background: gold;
}
[data-featured] {
  border: 2px solid blue;
}
.tooltip::after {
  content: attr(data-tooltip);
}

4. 实际应用

<ul id="user-list">
  <li data-user-id="1" data-name="张三">张三</li>
</ul>

document.getElementById('user-list').addEventListener('click', (e) => {
  const li = e.target.closest('li');
  if (li) console.log(`用户: ${li.dataset.name} (ID: ${li.dataset.userId})`);
});

5. 注意事项

• data-* 值始终是字符串，需手动类型转换
• 不建议存储大量数据，大数据用 WeakMap
• 避免用 innerHTML 输出 data-* 值（XSS 风险）