纯CSS属性选择器（如[data-theme="dark"]）性能最优、最易维护，支持精确/部分/前缀匹配，配合data-前缀语义清晰；JS动态修改data属性可自动触发样式更新，无需手动干预。
![如何根据元素属性动态设置css样式_利用[attr]属性选择器过滤](https://img.php.cn/upload/article/000/969/633/177806044863470.jpeg)
用 [data-theme="dark"] 这类属性选择器直接写 CSS 规则
不需要 JS 参与，纯 CSS 就能根据元素是否有某个属性、或属性值是否匹配，批量应用样式。这是最轻量、性能最好、也最易维护的方式。
常见错误是把属性名写错，比如写成 div[theme="dark"] 却没在 HTML 里加 theme 属性；正确做法是统一用 data- 前缀（语义清晰、合法、避免冲突）：
<div data-theme="dark"></div>- CSS 中写
div[data-theme="dark"] { background: #1a1a1a; color: #eee; } - 支持部分匹配：
[data-status~="error"]匹配data-status="warning error"这类空格分隔的值 - 支持前缀匹配：
[data-id^="user-"]匹配data-id="user-123" - 不推荐用
[class]这种存在但无值的判断——它会匹配所有带 class 属性的元素，包括class=""，行为不可靠
JS 动态设置 data- 属性后，CSS 自动响应
只要你在 JS 里改了 dataset 或 setAttribute，浏览器会立刻触发样式重计算，对应 [data-*] 规则自动生效。不用手动触发动画或强制重排。
示例：切换主题时只改一个属性，整页样式联动
立即学习“前端免费学习笔记（深入）”；
const root = document.documentElement;
root.setAttribute('data-theme', 'light'); // 切到浅色
// 或
root.dataset.theme = 'dark'; // 效果等价
配套 CSS：
html[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; }
html[data-theme="light"] { --bg: #fff; --text: #333; }
body { background: var(--bg); color: var(--text); }
注意点：
-
dataset会自动把横线转驼峰（data-user-id→el.dataset.userId），但 CSS 选择器仍要用原名[data-user-id] - 设空字符串
el.dataset.status = ''不等于移除属性，得用el.removeAttribute('data-status')才能让[data-status]选择器失效 - IE11 不支持
dataset，需回退到getAttribute/setAttribute
为什么不用 element.style 或 classList？
当你要控制的不是单个元素，而是“所有带 data-role="sidebar" 的容器”，或者“所有 data-loaded="false" 的卡片”，硬编码 style 或逐个切 classList 就太重了。
对比来看：
-
element.style.display = 'none'：只关一个元素，且覆盖所有 display 来源，后续靠 class 恢复可能失败 -
el.classList.add('is-hidden')：得提前写好.is-hidden { display: none; }，但无法按属性值分支（比如data-level="high"和data-level="low"要不同边框） -
[data-level="high"] { border: 2px solid red; }：规则一次写完，JS 只管改属性，样式逻辑完全解耦
真正卡住人的地方，往往是忘了 CSS 优先级：如果已有 .card { border: 1px solid #ccc; }，而你只写了 [data-urgent] { border-color: red; }，那 border-width 和 border-style 会被继承，但颜色不一定生效——得写全 border: 2px solid red; 或确保层叠顺序合理。
getComputedStyle 读不到 [attr] 触发的样式变化？
能读到，但别用 element.style.xxx 去验证。因为 [attr] 是 CSS 规则驱动的，最终效果走的是层叠计算，必须用 getComputedStyle(element).borderColor 才准。
典型误操作：
el.setAttribute('data-state', 'active');
console.log(el.style.borderColor); // → ''（空，因为没设内联 style）
console.log(getComputedStyle(el).borderColor); // → 'rgb(255, 0, 0)'
另外注意：
- 伪元素如
::before需显式传第二个参数：getComputedStyle(el, '::before') - 元素未挂载 DOM 或
display: none时，getComputedStyle返回的某些值（如width、height）可能是'auto'或默认值，不可信 - 想监听属性变化？用
MutationObserver监听attributes，而不是轮询getAttribute
