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 文件或
  

  密码登录在这里

  微信扫码登录或注册

  

  打开微信扫一扫，快速登录/注册

  登录即同意 用户协议 和 隐私政策

  微信登录更方便

  • 密码登录
  • 注册账号

  

  忘记密码

  登录

  

  注册

  登录即同意 用户协议 和 隐私政策

  返回登录

  • 重置密码

  发送验证码

  重置密码