直接修改 style 属性最快但难维护，推荐用 class 切换；CSS 变量适合主题动态切换；insertRule 仅限极少数场景。
用 style 属性直接改内联样式最简单，但别滥用
想让某个元素立刻变色、移位或显隐，element.style.color = 'red' 是最快路径。它绕过 CSS 文件和选择器匹配，浏览器直接生效，没有重排/重绘延迟。
但问题也明显：样式逻辑散在 JS 里，复用难；无法用伪类（如 :hover）；多次赋值易覆盖（比如先设 style.width，再设 style.height，中间没保留原有其他样式）。
- 推荐只用于临时状态，比如拖拽时的
transform: translate()实时更新 - 批量改样式时，优先拼接字符串赋给
element.style.cssText，避免重复 DOM 访问 - 要保留原有内联样式？得先读
element.getAttribute('style')，再合并后写回
切换 class 是最健壮的动态样式方案
把样式规则全写在 CSS 文件里，JS 只负责增删 class 名，比如 el.classList.add('is-loading')。这样样式可复用、可继承、支持媒体查询和伪类，维护成本最低。
常见坑是 class 名冲突或遗漏前缀。比如用了 active 这种泛名，结果被第三方库覆盖；或者忘了在 CSS 里定义 .is-hidden { display: none; }，JS 切了 class 却没效果。
立即学习“前端免费学习笔记（深入）”；
- 约定 class 命名带业务前缀，如
btn--loading或card__header--expanded - 用
classList.toggle('xxx', condition)替代手写 if-else 切换逻辑 - 动画场景下，确保目标 class 的 transition 属性已预先定义在 CSS 中，否则切 class 不会动
CSS Custom Properties（CSS 变量）适合主题切换和运行时计算
在 :root 或某个父元素上定义 --primary-color: #007bff，JS 用 document.documentElement.style.setProperty('--primary-color', '#28a745') 动态改，所有用到该变量的地方自动响应。比反复操作 class 更灵活。
但它不触发重排，只影响重绘；且变量作用域受 CSS 继承限制——子元素拿不到父元素未声明继承的变量。另外，IE 完全不支持，需降级方案。
- 主题色切换首选方案：把所有颜色、间距、圆角抽成变量，一次 setProperty 全局生效
- 配合
calc()做动态尺寸，比如width: calc(var(--base-width) * 2)，JS 改--base-width就能联动缩放 - 需要兼容 IE？用
CSSStyleSheet.insertRule动态注入规则，或 fallback 到 class 切换
用 CSSStyleSheet.insertRule 动态加规则，慎用
当真需要运行时生成整条 CSS 规则（比如根据用户上传图片生成背景渐变），可以用 document.styleSheets[0].insertRule('.foo { color: red; }', 0)。它插入的是真实 CSSOM 规则，支持选择器、媒体查询、@keyframes。
但副作用大：每次插入都可能触发全局样式重计算；多个脚本同时操作同一 sheet 容易冲突；调试困难——规则不在源码里，DevTools 里看不到原始出处。
- 只在极少数场景用：图表库动态生成配色 class、低代码平台实时预览样式
- 务必指定插入位置索引，避免插到 @import 后面导致无效
- 删除时用
deleteRule(index)，别靠 class 名搜索——sheet.rules 是只读的，没法 filter
CSS 动态样式的真正复杂点不在“怎么改”，而在于“改完是否可预测”：class 切换是否被更高优先级规则压制，CSS 变量是否被意外继承污染，style 赋值是否覆盖了关键过渡属性。动手前，先看一眼 DevTools 的 Computed 样式面板里，最终生效的是哪一条。
