17370845950

操作 element.style 仅影响内联样式，无法读取 CSS 文件样式；应优先用 classList 切换预设类；读取真实样式须用 getComputedStyle；动态主题推荐 CSS 变量配合 setProperty。

直接操作 element.style 是最常用但有局限的方式

通过 element.style 可以读写内联样式，适合简单、一次性的外观变更。但它只能访问和修改写在 style 属性里的值，无法获取 CSS 文件或 标签中定义的样式（比如 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 是首选。

• 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 变量

CSS 变量（--main-color）配合 style.setProperty 是目前最灵活又低风险的动态主题方案，比直接操作 style 或插入规则更易追踪、复用和回滚。