最快但受限的方式是直接修改element.style，仅影响内联样式且需驼峰命名、显式单位；批量设置用Object.assign；优先用classList增删预设类；读真实样式用getComputedStyle；动态加规则慎用insertRule，推荐style标签。
直接改 element.style 是最快但最受限的方式
这是最直观的动态改样式方法，适用于单个元素、少量属性、运行时临时覆盖。它只影响 style 内联属性，不会触碰 CSS 类或外部样式表。
常见错误：以为 element.style.color = "red" 能生效，结果发现没反应——其实是拼写错了，比如写成 colour（英式拼写）或 background-color（带短横线，JS 里必须驼峰：backgroundColor）。
-
style只读取/设置内联样式，不反映 CSS 类定义的值（哪怕实际渲染是那个颜色） - 单位必须显式写出，
element.style.width = "200"无效，得写"200px" - 批量设多个属性？别连写
style.a=1; style.b=2;，用Object.assign(element.style, { width: "200px", opacity: 0.8 })更干净
用 classList 切换预设样式更可靠
绝大多数场景下，应该优先通过添加、移除 CSS 类来控制样式，而不是手写一堆 style.xxx。这样语义清晰、可复用、易维护，也方便用 CSS 动画和媒体查询。
典型误用：用 element.className = "active" 完全覆盖原有 class，导致丢失其他必要类名（如 "btn btn-primary" 变成只剩 "active"）。
立即学习“Java免费学习笔记（深入）”；
- 用
element.classList.add("active")、.remove("disabled")、.toggle("hidden")安全增删 -
classList.contains("loading")比正则匹配className字符串靠谱得多 - 需要同时操作多个类？
classList.add("a", "b", "c")支持多参数；IE10+ 兼容，老 IE 用className.split(" ").includes(...)回退
getComputedStyle 读不到 style 属性但能读真实渲染值
想获取元素当前实际生效的宽高、颜色、字体大小？别查 element.style.xxx，它为空时啥也没有。要用 getComputedStyle(element)。
容易踩的坑：在元素还没挂载到 DOM（比如刚 document.createElement 出来但没 appendChild）时调用，会返回空字符串或默认值（如 width: "auto"），不是你想要的计算后像素值。
- 返回的是只读的
CSSStyleDeclaration对象，属性名也是驼峰（fontSize、borderTopWidth） - 想读伪元素样式？
getComputedStyle(element, "::before")支持第二参数 - 性能注意：频繁调用可能触发重排，尤其在循环里——先缓存结果，别反复查
用 CSSStyleSheet.insertRule 动态加规则要小心作用域
极少情况下真需要运行时注入新 CSS 规则（比如主题色切换、按需加载组件样式），可以用 document.styleSheets[0].insertRule。但它不是“全局生效”的魔法，受 CSS 层叠顺序和作用域限制。
常见失败：插入了 insertRule(".my-btn { color: red; }", 0)，但页面没变——因为已有更具体的规则（如 button.my-btn:hover）把它盖住了；或者样式表是跨域的（CORS 策略阻止 JS 访问）。
- 必须确保目标
styleSheet可写（disabled === false，且非href加载的外链样式表） - 插入位置索引（第二个参数）影响层叠优先级：插到前面可能被后面规则覆盖
- 现代替代方案：用
标签 +textContent更简单可控，也避免跨域问题
const style = document.createElement("style");
style.textContent = `.dynamic-theme { background: var(--bg-color); }`;
document.head.appendChild(style);
CSS 动态修改真正难的不是语法，而是搞清「你想改的是什么层级的样式」：是单个元素的临时表现？是一组组件的状态映射？还是整个页面的主题系统？选错方式，后面调试成本翻倍。 
