JavaScript修改样式的几种方式

JavaScript动态修改样式主要有三种高效且各具适用场景的方法：直接操作元素的`style`对象适合临时、单次的内联样式控制；通过`classList`切换CSS类名是主流推荐方案，兼顾复用性、可维护性与响应式设计；而动态操作`CSSStyleSheet`规则（如插入新规则或修改CSS变量）则专精于运行时主题切换、暗色模式实现和全局样式注入。选择哪种方式，关键取决于修改范围（单元素 or 全局）、是否需要状态驱动、以及长期可维护性——让JS专注逻辑，CSS负责表现，才是现代前端的最佳实践。

JavaScript 动态改样式，核心就三条路：改元素的 style 对象、切换 className、操作 CSSStyleSheet 规则。选哪条，取决于你改的是单个元素还是全局规则，以及是否需要响应式或复用。

直接改 style 属性——适合临时、单次、内联控制

这是最直白的方式，本质是操作 DOM 元素的 style 属性（即内联样式），优先级最高，会覆盖 CSS 文件里的同名规则。

• 注意驼峰命名：backgroundColor 而不是 background-color；zIndex 而不是 z-index
• 值必须带单位（除 0）：el.style.width = '200px'，写 '200' 无效
• 读取时只能拿到内联样式，无法读取 CSS 文件或