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

Javascript pure switch beetween 2 different CSS styles of an element

本文关键字：两种 CSS 样式 之间 元素 一个 Javascript      更新时间：2023-09-26

我有两个body style。我能想到的选择和应用

的方法有三种
  • 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;
}

如果你不介意使用JQuery，我会这样做:

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

然后使用$('body').toggleClass('different')在它们之间切换。文档在这里。

你可以创建不同的类然后应用它。

CSS 

 body.style1 {
       background : red;
 } 
 body.style2 {
       background : blue;
 }
Javascript 

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

完成了!

这不是最好的解决方案(使用类代替)，但你所要求的，CSS操作与香草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
访问 cssstylesheet 的另一种方法是通过document.styleSheets。这跳过了<style>步骤，但我不喜欢它，例如，如果你试图访问不同的源托管表，你可能会以SecurityError结束。通过<style>，在我看来，给你更多的控制。
相关文章：