如何用JavaScript实现动态修改CSS样式表

下面我将详细讲解如何用JavaScript实现动态修改CSS样式表。

一、获取并修改样式表内容

首先，我们需要获取样式表的DOM对象。可以通过以下方式获取：

let styleSheet = document.styleSheets[0];

其中，styleSheets属性返回一个包含页面中所有样式表的数组，我们可以通过数组下标指定所要修改的样式表对象。修改样式属性的方法有两种。

方法一：使用CSS规则

// 添加规则
styleSheet.insertRule("body { color: red; }", 0);

// 修改规则
styleSheet.rules[0].style.color = "blue";

// 删除规则
styleSheet.deleteRule(0);

方法二：使用选择器

// 添加样式
styleSheet.addRule("body", "color: red;", 0);

// 修改样式
styleSheet.rules[0].style.color = "blue";

// 删除样式
styleSheet.removeRule(0);

上述代码中，insertRule()与addRule()方法均用于添加样式，参数中传入的第一个字符串为CSS选择器部分，第二个字符串为CSS样式属性部分，第三个参数为要插入的规则的下标。rules属性包含了当前样式表所包含的CSS规则。

二、使用JavaScript动态更换样式表

鉴于某些情况下，我们需要动态地切换不同的样式风格，我们可以通过JavaScript来完成这个功能。具体过程如下：

1. 给网页中要切换样式的元素加上class；
2. 在JavaScript中获取元素对象，并监听其点击事件；
3. 在点击事件的回调函数中，添加/删除样式表。

示例代码如下：

<!-- 网页中要切换样式的元素 -->
<button id="button">切换样式</button>

<!-- 程序中将要替换为的不同样式表 -->
<link id="dark-mode" rel="stylesheet" href="dark.css">
<link id="light-mode" rel="stylesheet" href="light.css">

// 获取元素对象
let button = document.getElementById("button");

// 监听点击事件，切换样式表
button.addEventListener("click", function() {
  let darkMode = document.getElementById("dark-mode");
  let lightMode = document.getElementById("light-mode");
  if (darkMode.disabled) {
    darkMode.disabled = false;
    lightMode.disabled = true;
  } else {
    darkMode.disabled = true;
    lightMode.disabled = false;
  }
})

上述代码中，我们给要切换样式的元素加上了id为button的按钮，监听其点击事件，在回调函数中判断当前应使用的样式表并更改对应对象的disabled属性。

此外，我们还需在每个要替换的样式表的href属性后面加上?version=1.0或其他的参数，以在切换样式表时避免本地缓存导致无法刷新样式的问题。