JavaScript修改DOM样式主要有四种方式：直接操作style属性（需驼峰命名、手动加单位）、用classList增删预定义CSS类（推荐）、调用getComputedStyle获取渲染后样式（只读，避免高频调用）、通过setProperty修改CSS变量实现主题切换。
JavaScript 通过操作 DOM 元素的 style 属性或 class 列表，直接修改元素的 CSS 表现，这是最常用、最可控的协同方式。
直接修改内联样式（style 属性）
JavaScript 可以读写元素的 element.style 对象，它映射的是 HTML 的 style 内联属性。注意：只能设置和读取已通过内联方式（或 JS 设置过）的样式，不能获取 CSS 文件中定义的样式值（如需获取，要用 getComputedStyle()）。
设置单个样式：box.style.backgroundColor = 'blue';（驼峰命名，不带横线） 设置带单位的数值：box.style.width = '200px';（像素、em、% 等需手动加单位） 移除某样式：box.style.opacity = ''; 或 box.style.removeProperty('opacity');
切换 CSS 类（推荐做法）
比起逐条改 style，更推荐用 classList 增删预定义的 CSS 类。这样逻辑清晰、易于维护、支持过渡动画，也符合关注点分离原则。
添加类：btn.classList.add('active'); 移除类：btn.classList.remove('disabled'); 切换开关：menu.classList.toggle('open'); 检查是否存在：if (icon.classList.contains('loading')) { ... }
对应 CSS 只需提前写好：.active { background: #007bff; } .open { max-height: 500px; }
立即学习“Java免费学习笔记（深入）”；
动态读取计算后的样式
当需要知道元素最终渲染出的样式（比如含继承、媒体查询生效后的值），用 getComputedStyle(element)：
const computed = getComputedStyle(box); console.log(computed.width); // 返回 '200px' console.log(computed.getPropertyValue('margin-top')); // 支持横线写法
注意：返回的是只读对象，不能直接修改；且该方法开销略大，避免在循环或高频事件中频繁调用。
配合 CSS 变量（Custom Properties）实现主题切换
JS 可以直接修改根元素或任意元素上的 CSS 变量，让整个样式系统响应式更新：
设置变量：document.documentElement.style.setProperty('--primary-color', '#ff6b6b'); 清除变量：document.documentElement.style.removeProperty('--primary-color'); CSS 中使用：button { background-color: var(--primary-color, #007bff); }
这种方式特别适合暗色模式切换、品牌色定制等场景，无需重写大量 class。
基本上就这些。核心是：小范围临时调整用 style，常规交互用 classList，全局主题用 CSS 变量，查渲染结果用 getComputedStyle。不复杂但容易忽略细节，比如单位、命名规则和性能影响。
以上就是JavaScript如何与CSS协同工作改变样式？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543124.html
微信扫一扫 
支付宝扫一扫 
