最直接的方式是用 document.querySelector 定位元素后通过 style 属性修改内联样式，但仅影响行内样式；批量操作用 querySelectorAll 配合 forEach；修改单个样式需用驼峰命名（如 backgroundColor）；设置 display: none 后 getComputedStyle 将返回该值而非原始 CSS 值；推荐优先使用 classList.add/remove/toggle 切换预设类名以提升可维护性；动态注入样式规则需通过 CSSStyleSheet.insertRule；监听真实渲染样式变化应使用 getComputedStyle 或 MutationObserver 监控 class 属性。
用 document.querySelector 找元素再改 style 属性
这是最直接的方式：先用 CSS 选择器定位元素，再通过 JS 修改其内联样式。注意它只影响 style 属性，不改变 CSS 类或外部样式表。
-
document.querySelector只返回第一个匹配元素；要批量操作，用document.querySelectorAll配合forEach - 修改单个样式时，用
element.style.propertyName = "value"，属性名是驼峰式（如backgroundColor），不是短横线（background-color） - 设置
display: none时，别写成element.style.display = "none"后又期望用getComputedStyle读取原始值——内联样式优先级更高，会覆盖 CSS 文件里的定义
const btn = document.querySelector('button.primary');
btn.style.backgroundColor = '#007bff';
btn.style.borderRadius = '4px';
用 classList 切换预设的 CSS 类更安全
比起硬编码样式值，通过增删 class 来控制样式更易维护、可复用，也避免内联样式污染和优先级混乱。
-
element.classList.add('active')、.remove('disabled')、.toggle('hidden')是最常用方法 - 多个类可一次性传入：
el.classList.add('a', 'b', 'c') - 判断是否存在某类用
el.classList.contains('loading')，比解析className字符串可靠 - 注意：如果 CSS 类里用了
!important，JS 用style直接赋值可能被忽略；而classList不受此影响，因为它只是开关类名
const card = document.querySelector('.card[data-id="123"]');
card.classList.toggle('expanded');
动态生成样式规则要用 CSSStyleSheet.insertRule
当需要运行时注入整套规则（比如主题色切换、响应式断点适配），不能只靠改单个元素样式，得操作样式表本身。
- 必须先获取一个
CSSStyleSheet对象，通常从document.styleSheets[0]或新建标签中取 -
insertRule第一个参数是完整 CSS 规则字符串，第二个是插入位置索引（如0表示最前） - 规则中的选择器必须合法，且浏览器会校验语法；写错会导致
DOMException错误，建议用try/catch - 删除规则用
deleteRule(index)，但要注意索引会随插入/删除变化，最好记录 rule 的引用或用cssRules查找
const style = document.createElement('style');
document.head.appendChild(style);
const sheet = style.sheet;
sheet.insertRule('.theme-dark .text { color: #f0f0f0; }', 0);
监听样式变化？别依赖 style 属性，用 MutationObserver 或 getComputedStyle
element.style 只反映内联样式，无法感知类名变更或外部 CSS 生效结果。真要响应“最终渲染样式”变化，得另想办法。
立即学习“Java免费学习笔记（深入）”；
-
getComputedStyle(element)返回实时计算后的样式对象，适合读取（如判断是否可见、当前宽度），但它是只读的 - 想监听类名变动，可用
MutationObserver监控class属性：attributes: true, attributeFilter: ['class'] - 监听任意样式变化没有原生 API；常见替代方案是轮询
getComputedStyle某属性（性能差），或在 JS 控制类名/样式前主动触发自定义事件 - 注意：
getComputedStyle返回的值是解析后单位（如"20px"），不是原始声明值（如"2rem"）
const el = document.querySelector('.box');
const computed = getComputedStyle(el);
console.log(computed.width); // "200px"
CSS 选择器和 JS 结合的关键不在“能不能选”，而在“选完之后怎么改才不影响可维护性”。直接写 style 快，但容易散落、难追踪；靠 classList 干净，但要求提前写好对应 CSS；动态插规则灵活，却要小心跨浏览器兼容和注入时机。真正难的是根据场景选对那条路，而不是堆砌 API。 
