能，但必须用 dataset 或 getattribute()，不能直接当普通属性访问；data-* 属性是 html5 规范要求的合法自定义数据容器，专供 js 读取，不参与样式或语义，且兼容性好、无性能负担。
data-\* 属性到底能不能被 JavaScript 读取
能，但必须用 dataset 或 getAttribute()，不能直接当普通属性访问。比如 element.data-id 是无效的，会返回 undefined。
常见错误现象：在控制台里打 console.log(div.data-user-id)，结果是 undefined，以为属性没生效——其实是访问方式错了。
- 推荐用
element.dataset.userId（注意驼峰转换：data-user-id→userId） - 如果属性名含数字或特殊字符（如
data-2024-active），只能用element.getAttribute('data-2024-active') -
dataset只读取字符串，数值、布尔值都得手动转换，别指望它自动解析true或42
什么时候该用 data-\*，而不是 class 或自定义属性
核心判断标准：这个信息是否「只供 JS 使用，不参与样式或语义」。class 用于样式和状态标记（如 is-loading），而 data-\* 是纯数据容器。
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
- 渲染列表时带原始 ID：
<li data-item-id="123">标题</li>，点击后直接取 ID 发请求 - 服务端预埋配置：
，避免 JS 里硬编码路径 - 实验性功能开关：
<button data-feature="new-search"></button>，方便灰度控制
容易踩的坑：把 data-role="tab" 当成 ARIA 替代品——它对屏幕阅读器完全不可见，也不能替代 role 属性。
data-\* 的性能和兼容性影响
几乎没有运行时开销。浏览器不会解析或验证 data-\* 值，只是原样存着，DOM 操作成本和普通属性一样低。
但要注意：
- IE11 支持
dataset，但对连字符转驼峰有 bug（比如data-user-id在 IE11 中dataset.userId可能取不到）→ 建议降级用getAttribute - 大量节点塞大段 JSON 字符串（如
data-config='{"a":1,"b":2}'）会增大内存占用，不如用JSON.parse(el.getAttribute('data-config'))按需解析 - 不要在
data-\*里放敏感信息（如 token、用户邮箱），它在 HTML 源码里明文可见
为什么不能用任意自定义属性（比如 user-id）代替 data-\*
因为非标准属性会被浏览器忽略或触发未知行为，且无法通过 dataset 访问。HTML 规范明确要求自定义数据必须加 data- 前缀，否则不是合法 HTML5。
实际问题：
<div user-id="123">：W3C 验证失败，部分工具链（如某些 SSR 框架）可能过滤或报错<li> <code>el.userId和el.getAttribute('user-id')都拿不到值，因为浏览器根本不把它当属性存- Vue/React 等框架绑定属性时，未加
data-的会直接丢弃（尤其 SSR 渲染后）
真正麻烦的是：这种写法在开发时看似“能跑”，上线后在某个环境突然失效，排查起来反而更花时间。
