js如何操作CSS样式表规则 4个实用方法动态修改网页样式-js教程-PHP中文网

js如何操作CSS样式表规则 4个实用方法动态修改网页样式

穿越時空

发布： 2025-06-24 11:52:02

原创

290人浏览过

javascript动态修改css样式主要有四种方法：1.直接修改元素style属性；2.切换classname或classlist；3.操作document.stylesheets集合；4.使用css变量。获取样式表使用document.stylesheets集合，遍历时可访问每个样式表的href属性。通过cssrules或rules属性可获取css规则集合，并进一步读取选择器和规则内容。添加规则使用insertrule或addrule方法，删除规则则用deleterule或removerule方法。操作时需注意跨域限制和性能问题，推荐合并操作或使用类名切换。css变量可用于主题切换，通过在:root定义变量并用javascript修改其值实现全局样式变更。最佳实践包括优化性能、处理兼容性、避免跨域访问、提升代码可维护性及利用开发者工具调试。

js如何操作CSS样式表规则 4个实用方法动态修改网页样式

直接操作CSS样式表规则，在JavaScript中实现对网页样式的动态修改，主要有以下几个实用方法：

直接修改元素的style属性：这是最直接也最常用的方法，适用于修改单个元素的特定样式。
修改className或classList：通过切换CSS类名，可以一次性应用多个样式，更易于维护和复用。
操作document.styleSheets集合：可以获取和修改已加载的样式表，甚至动态创建新的样式规则。
使用CSS变量（Custom Properties）：通过JavaScript修改CSS变量的值，影响所有使用该变量的元素。

如何使用JavaScript获取CSS样式表？

要使用JavaScript获取CSS样式表，通常会用到document.styleSheets这个集合。这个集合包含了页面上所有已加载的样式表，包括通过<link>标签引入的外部样式表和<style>标签嵌入的内部样式表。

// 获取所有样式表
const styleSheets = document.styleSheets;

// 遍历所有样式表
for (let i = 0; i < styleSheets.length; i++) {
  const styleSheet = styleSheets[i];
  console.log(styleSheet.href); // 打印样式表的URL，如果是内部样式表则为null
}

登录后复制

获取到styleSheet对象后，你可以进一步访问其cssRules属性（在某些浏览器中是rules），这个属性是一个包含所有CSS规则的集合。

立即学习“前端免费学习笔记（深入）”；

// 获取第一个样式表的CSS规则
const firstStyleSheet = document.styleSheets[0];
const cssRules = firstStyleSheet.cssRules || firstStyleSheet.rules; // 兼容不同浏览器

// 遍历所有CSS规则
for (let j = 0; j < cssRules.length; j++) {
  const cssRule = cssRules[j];
  console.log(cssRule.selectorText); // 打印选择器
  console.log(cssRule.cssText); // 打印完整的CSS规则
}

登录后复制

值得注意的是，由于跨域安全限制，JavaScript可能无法访问来自不同域的样式表。此外，直接操作cssRules可能会导致性能问题，特别是对于大型样式表。

动态添加和删除CSS规则的实用技巧

动态添加CSS规则，可以使用styleSheet.insertRule()方法（在旧版本IE中使用styleSheet.addRule()）。例如，要为所有p元素添加红色文本：

壁纸样机神器

免费壁纸样机生成

查看详情

const styleSheet = document.styleSheets[0]; // 获取第一个样式表
const selector = 'p';
const cssText = 'color: red;';

if (styleSheet.insertRule) {
  styleSheet.insertRule(selector + '{' + cssText + '}', styleSheet.cssRules.length);
} else if (styleSheet.addRule) { // 兼容旧版本IE
  styleSheet.addRule(selector, cssText, styleSheet.rules.length);
}

登录后复制

删除CSS规则，可以使用styleSheet.deleteRule()方法（在旧版本IE中使用styleSheet.removeRule()）。你需要知道要删除的规则的索引。

const styleSheet = document.styleSheets[0]; // 获取第一个样式表
const indexToRemove = 0; // 假设要删除第一个规则

if (styleSheet.deleteRule) {
  styleSheet.deleteRule(indexToRemove);
} else if (styleSheet.removeRule) { // 兼容旧版本IE
  styleSheet.removeRule(indexToRemove);
}

登录后复制

添加和删除规则时，需要注意性能问题。频繁操作可能会导致页面重绘和回流，影响用户体验。建议尽量合并操作，或者使用CSS类名切换的方式来代替。

如何使用CSS变量（Custom Properties）实现主题切换？

CSS变量提供了一种灵活的方式来实现主题切换。首先，在:root伪类中定义一些CSS变量：

:root {
  --background-color: white;
  --text-color: black;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

登录后复制

然后，使用JavaScript修改这些变量的值：

function setTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.style.setProperty('--background-color', 'black');
    document.documentElement.style.setProperty('--text-color', 'white');
  } else {
    document.documentElement.style.setProperty('--background-color', 'white');
    document.documentElement.style.setProperty('--text-color', 'black');
  }
}

// 切换到深色主题
setTheme('dark');

登录后复制

这种方法的优点是，只需要修改几个CSS变量，就可以影响整个页面的样式，而且性能较好。