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修改其值实现全局样式变更。最佳实践包括优化性能、处理兼容性、避免跨域访问、提升代码可维护性及利用开发者工具调试。
直接操作CSS样式表规则，在JavaScript中实现对网页样式的动态修改，主要有以下几个实用方法：
-
直接修改元素的
style属性：这是最直接也最常用的方法，适用于修改单个元素的特定样式。 -
修改
className或classList：通过切换CSS类名，可以一次性应用多个样式，更易于维护和复用。 -
操作
document.styleSheets集合：可以获取和修改已加载的样式表，甚至动态创建新的样式规则。 - 使用CSS变量（Custom Properties）：通过JavaScript修改CSS变量的值，影响所有使用该变量的元素。
如何使用JavaScript获取CSS样式表？
要使用JavaScript获取CSS样式表，通常会用到document.styleSheets这个集合。这个集合包含了页面上所有已加载的样式表，包括通过<link>标签引入的外部样式表和<style></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变量，就可以影响整个页面的样式，而且性能较好。
动态修改CSS样式表的注意事项和最佳实践
- 性能优化：避免频繁操作CSS规则，尽量合并操作，或者使用CSS类名切换的方式。
- 浏览器兼容性：不同的浏览器对CSS规则的操作方法可能略有不同，需要进行兼容性处理。
- 避免跨域问题：JavaScript可能无法访问来自不同域的样式表。
- 代码可维护性：使用CSS变量和CSS类名切换可以提高代码的可维护性。
- 调试技巧：使用浏览器的开发者工具可以方便地查看和调试CSS规则。
总而言之，JavaScript操作CSS样式表规则是一种强大的技术，可以实现各种动态效果和主题切换。但需要注意性能、兼容性和可维护性等方面的问题。
