data-attribute不能直接控制样式，因为它是纯数据容器，不触发渲染；必须配合css属性选择器（如[data-status="error"]）或js读取后操作dom才能生效。
data-attribute 为什么不能直接控制样式
因为浏览器不会自动把 data- 属性当 CSS 选择器用——它只是个存储容器，不触发渲染。想靠 data-status="error" 让单元格变红，必须配合 CSS 选择器或 JS 主动读取。
纯 CSS 方案：用属性选择器匹配 data-* 值
最轻量、无 JS 的方式，适合静态或服务端渲染场景。关键在写对选择器，且注意引号和大小写敏感。
-
[data-status="error"]匹配值完全相等的单元格；[data-status~="warning"]可匹配空格分隔的单词（如data-status="warning highlight"） - 避免写成
td[data-status]—— 这只检测属性是否存在，不区分值，容易误样式 - 优先用
td[data-status]+ 具体值选择器，而非td+ 后代选择器，性能更好 - 示例：
td[data-status="error"] { background-color: #ffebee; color: #c62828; }
JS 动态注入：读取 data-* 并 setAttribute 或 classList
适合前端交互频繁、状态实时变化的表格（比如编辑后校验、轮询更新）。别直接改 style，用 class 更易维护。
- 用
el.getAttribute('data-status')读值，注意返回的是字符串，null表示属性不存在 - 推荐用
el.classList.add('status-error')而非el.className = '...'，避免覆盖已有 class - 如果表格是动态生成的（如 Vue/React 渲染），确保 JS 在 DOM 就绪后执行，或监听
DOMSubtreeModified（慎用）或用 MutationObserver - 批量操作时，避免对每个
td都调用getAttribute，可先用document.querySelectorAll('td[data-status]')筛选再遍历
兼容性与性能陷阱
IE11 支持 data- 属性但不支持 dataset API；大量单元格时，CSS 属性选择器比 JS 遍历快，但过度嵌套选择器（如 table tbody tr td[data-status]）会拖慢重绘。
- 不要依赖
el.dataset.status在 IE11 中工作，降级用getAttribute - 避免在
scroll或input事件里反复查询data-属性，缓存结果或节流 - 如果单元格内容含 HTML，
data-值要手动转义（如"），否则破坏属性结构 - 服务器端渲染时，确保
data-值是合法字符串（不含换行、双引号未转义），否则解析失败
实际最难的不是怎么写，是决定哪些状态该走 CSS、哪些必须 JS 处理——比如“是否禁用”这类布尔状态适合 CSS，而“错误详情 tooltip 内容”就得 JS 注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
