JavaScript 控制样式需分三层：修改行内样式用 element.style，读取最终计算样式用 getComputedStyle()，动态操作 CSS 规则用 CSSStyleSheet；监听样式变化无原生 API，应主动管理状态而非被动轮询。
JavaScript 不能直接“操作 CSS 文件”，但能精准控制元素的样式表现——关键在于区分 styl 属性、
getComputedStyle() 和 CSSStyleSheet 三类机制，用错场景会立刻失效。
修改行内样式：只动 element.style，别碰 CSS 类
这是最常用也最容易误解的方式。element.style 只读写 HTML 的 style 属性（即行内样式），对 class 或外部 CSS 规则完全无感。
- 设置单个属性：
el.style.color = 'red'（注意驼峰命名，background-color→backgroundColor） - 批量设置推荐用
Object.assign(el.style, { opacity: 0.5, transform: 'scale(1.2)' }) - 清空某个样式：赋值空字符串，如
el.style.width = ''，不是null或undefined - 如果元素原本靠 class 控制颜色，改
style.color会覆盖它；但删掉style.color不会恢复 class 的颜色——得手动移除style属性或重置为''
读取最终计算样式：必须用 getComputedStyle()，不能读 style
element.style 看不到 class、媒体查询、继承或浏览器默认样式，真正渲染出来的值得靠 getComputedStyle()。
- 基本用法：
getComputedStyle(el).fontSize返回带单位的字符串（如"16px"） - 它返回的是只读对象，修改它无效；且不包含自定义属性（
--my-color），需用getPropertyValue('--my-color') - 在元素未插入 DOM 时调用会返回空样式（如
display: 'none'的元素可能返回'inline'），务必确保已挂载 - 性能敏感场景慎用：频繁调用会触发重排（reflow），可缓存结果或用
ResizeObserver/IntersectionObserver替代轮询
动态增删 CSS 规则：走 CSSStyleSheet，别拼字符串注入
需要运行时开关整套样式（比如主题切换、A/B 测试），直接操作 document.styleSheets 比反复切 class 更可控。
- 获取目标 sheet：
const sheet = document.styleSheets[0]，或通过标签的sheet属性 - 插入规则（Chrome/Firefox 支持）：
sheet.insertRule('.btn { background: blue; }', sheet.cssRules.length) - 删除规则：
sheet.deleteRule(index)，index 来自sheet.cssRules列表 - 注意同源限制：跨域
的sheet对象无法访问其cssRules，会抛SecurityError - IE 仅支持
addRule()/removeRule()，且参数顺序不同，现代项目建议用 CSSOM 封装层（如tiny-cssom）屏蔽差异
监听样式变化？没有原生 API，得绕道 MutationObserver 或 ResizeObserver
CSS 本身不提供“某元素宽高变了”或“class 被加了”的事件。浏览器没暴露样式变更钩子。
- 监听 class 变更：
new MutationObserver观察className或classList属性变动 - 监听尺寸变化：用
ResizeObserver（支持率良好），比轮询offsetWidth高效得多 - 监听自定义属性变化：CSS
@property（实验性）配合transition+transitionend事件模拟，但兼容性差，生产环境慎用 - 绝对不要用
setInterval定时查getComputedStyle—— 卡顿、耗电、不可靠
真正难的不是语法，而是判断该用哪一层：临时交互用 style，查真实效果用 getComputedStyle，管理主题用 CSSStyleSheet，而“监听变化”本质上是个设计问题——多数时候该由 JS 主动触发状态更新，而不是被动等样式变。
