Javascript在一个元素的两种不同CSS样式之间切换

我有两种体型。我可以想象如何选择和应用三种方法

• applyStyle（bodyName或Element，#styleNumber）

• If（）{选择样式）

• 开关{案例1:…案例2:…}

我应该将样式存储在一个变量中还是两个不同的CSS文件中

/* body style 1 */
body {
  background-color: #E6F6F6;
}

/* body style 2 */
body {
  background-color: #F6F6F6;
}

---

如果您不介意使用JQuery，我会这样做：

body {
    background-color: #E6F6F6;
}
body.different {
    background-color: #F6F6F6;
}

---

然后使用

$（'body'）。toggleClass（'different'）

在它们之间进行切换。

您可以创建不同的类并应用它

CSS Javascript

---

完成！

这不是最好的解决方案（改用类），但您所要求的，使用普通JavaScript进行CSS操作，是完全可能的

首先，参考我们将要修改的

，例如

var style = document.querySelector('style');

现在您可以访问此

CSSStyleSheet具有insertRule和deleteRule方法，这些方法使用指示感兴趣的规则应该在哪里的标记

现在，把这些放在一起

// initial
var idx = sheet.cssRules.length; // append a new rule to the end
sheet.insertRule('body {background-color: #E6F6F6;}', idx);

// then change
sheet.insertRule('body {background-color: #F6F6F6;}', idx);
sheet.removeRule(idx + 1); // remove the previous rule which got incremented one index

---

---

另一种访问CSSStyleSheets的方法是通过

document.styleSheets

。这跳过了

步骤，但我不喜欢这样做，例如，如果您尝试访问不同的源代码托管的工作表，可能会出现安全错误。在我看来，通过

可以提供更多的控制。

有两个单独的类，并且在这些类之间切换。不使用jQuery:

document.body.classList.toggle（'different'）

var style = document.querySelector('style');

var sheet = style.sheet;

// initial
var idx = sheet.cssRules.length; // append a new rule to the end
sheet.insertRule('body {background-color: #E6F6F6;}', idx);

// then change
sheet.insertRule('body {background-color: #F6F6F6;}', idx);
sheet.removeRule(idx + 1); // remove the previous rule which got incremented one index