Question

我有两种体型。我可以通过3种方式想象如何选择和应用

applyStyle(bodyName or Element, #styleNumber)
If () {select style)
switch { case 1: ... case 2: ... }

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

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

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

Answer 1

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

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

然后使用$('body').toggleClass('different')在它们之间切换。 Documentation here

Answer 2

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

CSS

 body.style1 {
       background : red;
 } 

 body.style2 {
       background : blue;
 }

的Javascript

 document.getElementsByTagName('body')[0].className = 'style2';

完成！

Answer 3

这不是最好的解决方案（使用类代替），但你要求的是 CSS操作 vanilla JavaScript ，这是完全可能的。

首先，参考我们将要修改的<style>，例如

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

现在，您可以访问此<style>

的CSSStyleSheet

var sheet = style.sheet;

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。这会跳过<style>步骤但我不喜欢它，例如如果您尝试访问其他原始托管表，则最终可能会出现 SecurityError 。在我看来，通过<style>可以让您获得更多控制权。

Javascript纯切换beetween元素的2种不同CSS样式

3 个答案:

CSS

的Javascript