操作 element.style 仅影响内联样式，无法读取 css 文件样式；应优先用 classlist 切换预设类；读取真实样式须用 getcomputedstyle；动态主题推荐 css 变量配合 setproperty。
直接操作 element.style 是最常用但有局限的方式
通过 element.style 可以读写内联样式，适合简单、一次性的外观变更。但它只能访问和修改写在 style 属性里的值，无法获取 CSS 文件或 <style></style> 标签中定义的样式（比如 getComputedStyle 才能读取）。
常见误区是以为 element.style.color = "red" 能覆盖所有情况——其实如果该元素被 CSS 类设置了 color: blue !important，这个赋值依然无效。
-
style属性只影响内联样式，优先级高但不持久 - 驼峰命名：CSS 中的
background-color要写成backgroundColor - 单位必须显式写出：
element.style.width = "200px"，不能只写200 - 批量设置推荐用
Object.assign(element.style, { opacity: 0.5, transform: 'scale(1.2)' })
用 classList 切换预设 CSS 类更可靠且可维护
绝大多数动态外观变更，应该靠增删 CSS 类来实现，而不是硬编码样式值。这样样式逻辑集中在 CSS 文件里，JS 只负责“开关”状态。
比如按钮悬停态、模态框显示/隐藏、主题切换等场景，classList 是首选。
立即学习“Java免费学习笔记（深入）”；
-
element.classList.add("active")—— 添加类 -
element.classList.remove("disabled")—— 移除类 -
element.classList.toggle("hidden")—— 切换类（有则删，无则加） -
element.classList.contains("loading")—— 判断是否含某类，常用于条件逻辑 - 支持多个参数：
element.classList.add("a", "b", "c")
用 getComputedStyle 读取真实渲染样式，避免误判
当需要根据当前样式做判断（比如“如果宽度大于 300px 就折叠”），不能依赖 element.style.width，因为它可能为空。必须用 getComputedStyle 获取浏览器实际计算后的值。
注意它返回的是只读对象，且所有值都是字符串（如 "245.6px" 或 "rgb(255, 0, 0)"），需手动解析。
const el = document.getElementById("box");
const computed = getComputedStyle(el);
console.log(computed.width); // "200px"
console.log(parseFloat(computed.fontSize)); // 16
console.log(computed.display); // "block"
- 返回值是最终生效样式，包含继承、层叠、媒体查询匹配结果
- 无法读取伪元素样式（如
::before），需用第二个参数指定：getComputedStyle(el, "::before") - 频繁调用可能触发重排（reflow），性能敏感场景应缓存结果
慎用 insertRule 动态插入 CSS 规则
极少数场景需要运行时生成全新样式规则（例如按用户配色实时更新主题变量），可操作 CSSStyleSheet 对象。但这属于高级用法，容易出错且调试困难。
主要风险在于跨浏览器兼容性（特别是老版 IE）、规则插入位置影响优先级、以及动态样式难以被 DevTools 正确标记来源。
const styleSheet = document.styleSheets[0];
styleSheet.insertRule(".dynamic-theme { color: #ff6b6b; }", styleSheet.cssRules.length);
- 必须确保目标
styleSheet可写（disabled === false且非 CORS 加载） - 插入位置索引很重要：
insertRule(rule, index)，插太前可能被后续规则覆盖 - 更安全的做法是预先定义好带占位符的类（如
.theme-primary），仅通过document.documentElement.style.setProperty()更新 CSS 变量
--main-color）配合 style.setProperty 是目前最灵活又低风险的动态主题方案，比直接操作 style 或插入规则更易追踪、复用和回滚。 
