上一篇
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> 或外部样式表中的规则：
// 获取第一个样式表
const stylesheet = document.styleSheets[0];
// 添加新规则
stylesheet.insertRule(".dynamic { padding: 15px; }", stylesheet.cssRules.length);
// 修改现有规则
stylesheet.cssRules[0].style.backgroundColor = "#f0f";
// 删除规则
stylesheet.deleteRule(0);
// 遍历所有规则
Array.from(stylesheet.cssRules).forEach(rule => {
if (rule.selectorText === ".header") {
rule.style.fontWeight = "bold";
}
});
动态创建样式标签
向 <head> 中注入新样式：
const styleTag = document.createElement("style");
styleTag.innerHTML = `
body.dark-mode {
background: #333;
color: white;
}
`;
document.head.appendChild(styleTag);
// 移除样式
document.head.removeChild(styleTag);
修改外部样式表链接
动态切换主题样式表：
// 获取现有链接
const themeLink = document.querySelector("#theme-style");
// 切换样式表URL
themeLink.href = "dark-theme.css";
// 禁用/启用样式表
themeLink.disabled = true; // 关闭当前样式
关键注意事项
-
性能优化
- 避免在循环中频繁操作样式（使用
requestAnimationFrame） - 批量修改时使用
document.createDocumentFragment() - 优先使用 class 切换而非逐行修改样式
- 避免在循环中频繁操作样式（使用
-
浏览器兼容性
- 旧版 IE 使用
element.currentStyle替代window.getComputedStyle - CSSOM 操作在 IE9+ 支持
- 旧版 IE 使用
-
样式优先级
内联样式 > 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
- 使用 CSS 变量实现动态主题：
应用场景建议
| 方法 | 适用场景 | 优点 |
|---|---|---|
| 修改内联样式 | 单个元素动态样式 | 即时生效，优先级高 |
| 切换类名 | 状态变化（激活/禁用等） | 易维护，支持复杂样式 |
| 操作样式表规则 | 批量修改同类元素 | 影响范围大 |
| 创建样式标签 | 动态添加全局样式 | 灵活性强 |
| 切换外部样式表 | 整体主题更换 | 便于管理多主题 |
引用说明参考 MDN Web Docs 的《使用动态样式信息》、W3C 的《CSSOM 规范》，以及 Google Developers 的《渲染性能优化指南》，技术实现已通过 Chrome、Firefox、Edge 最新版验证。
