上一篇
JS如何快速修改网页样式？
JavaScript可通过操作DOM元素的style属性直接修改内联样式，或使用classList增删类名切换CSS规则，也可访问document.styleSheets对象动态读写样式表规则，实现批量样式调整。
JavaScript 修改 HTML 样式表主要通过操作 DOM 和 CSSOM 实现，以下是 5 种核心方法及详细操作指南：
直接修改元素内联样式（最常用）
通过元素的 style 属性直接修改 CSS 属性：
// 获取元素 const element = document.getElementById("myElement"); // 修改单个样式 element.style.color = "blue"; element.style.fontSize = "20px"; // 修改多个样式（推荐） element.style.cssText = "background: yellow; border: 1px solid black;"; // 注意事项： // 1. 属性名使用驼峰写法（fontSize 而非 font-size） // 2. 会覆盖元素原有的内联样式
动态切换 CSS 类名
通过修改元素的 class 属性应用预定义样式：
/* 样式表中定义 */ .active { color: red; transform: scale(1.1); transition: all 0.3s; } // 添加类 element.classList.add("active"); // 移除类 element.classList.remove("inactive"); // 切换类（存在则移除，不存在则添加） element.classList.toggle("active"); // 检查类是否存在 if (element.classList.contains("active")) { // 执行操作 }
操作整个样式表规则
直接修改 <style> 或外部样式表中的规则：
动态创建样式标签
向 <head> 中载入新样式：
const styleTag = document.createElement("style"); styleTag.innerHTML = ` body.dark-mode { background: #333; color: white; } `; document.head.appendChild(styleTag); // 移除样式 document.head.removeChild(styleTag);
修改外部样式表链接
动态切换主题样式表：
关键注意事项
-
性能优化
- 避免在循环中频繁操作样式（使用 requestAnimationFrame）
- 批量修改时使用 document.createDocumentFragment()
- 优先使用 class 切换而非逐行修改样式
-
浏览器兼容性
- 旧版 IE 使用 element.currentStyle 替代 window.getComputedStyle
- CSSOM 操作在 IE9+ 支持
-
样式优先级
内联样式 > ID选择器 > 类选择器 > 标签选择器 > !important 修改时注意 !important 会覆盖 JS 样式
-
最佳实践
- 使用 CSS 变量实现动态主题： :root { --main-color: blue; } .element { color: var(--main-color); } document.documentElement.style.setProperty("--main-color", "red");
- 获取计算样式用 window.getComputedStyle(element)
- 动画优先使用 CSS transitions/animations
应用场景建议
方法 适用场景 优点 修改内联样式 单个元素动态样式 即时生效，优先级高 切换类名 状态变化（激活/禁用等） 易维护，支持复杂样式 操作样式表规则 批量修改同类元素 影响范围大 创建样式标签 动态添加全局样式 灵活性强 切换外部样式表 整体主题更换 便于管理多主题
引用说明参考 MDN Web Docs 的《使用动态样式信息》、W3C 的《CSSOM 规范》，以及 Google Developers 的《渲染性能优化指南》，技术实现已通过 Chrome、Firefox、Edge 最新版验证。
