一键切换样式表答案

【问题标题】：Toggle between stylesheets with one button一键切换样式表
【发布时间】：2014-10-27 21:31:48
【问题描述】：

我想使用一个按钮在两个样式表之间切换。我目前的代码是：

<link id="style1" rel="stylesheet" type="text/css" href="style.css" />
<link id="style2" rel="stylesheet" type="text/css" href="styleinvert.css" disabled="disabled" />

<script>
    function toggle() {
        var el1 = document.getElementById("style1"),
            el2 = document.getElementById("style2");
        if( el1.disabled == "disabled" ) {
            el1.disabled = undefined;
            el2.disabled = "disabled";
        } else {
            el1.disabled = "disabled";
            el2.disabled = undefined;
        }
    }
</script>

<a href="#" onclick="toggle()">Invert</a>

但是，这会导致样式表在停用第一个样式表和激活新样式表之间暂时消失。

有没有更好的方法来做到这一点？理想情况下，我只需为第二个样式表添加一个小的 sn-p 样式，因为我只需要更改字体颜色等一些东西。

【问题讨论】：

为什么不直接在 body 标签中添加一个类并在需要的地方编写覆盖样式？
我不知道该怎么做@KaiQing

标签： jquery css button stylesheet

【解决方案1】：

这是一个基本示例，我的意思是向正文添加一个类并编写覆盖样式...

function toggle(){
    $('body').toggleClass('style2');
}

// css

p{
    color:green;
}

.style2 p{
    color:red;
}

jquery 切换类文档：http://api.jquery.com/toggleclass/

【讨论】：

【解决方案2】：

不要使用“禁用”和未定义，而是使用真假：

function toggle() {
  var el1 = document.getElementById("style1"),
      el2 = document.getElementById("style2");

  if(el1.disabled) {
    el1.disabled = false;
    el2.disabled = true;
  } 
  else {
    el1.disabled = true;
    el2.disabled = false;
  }
}

【讨论】：