用一个按钮在样式表之间切换

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

<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>

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

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

来源

2014-10-27 univers_

为什么不只需在body标签中添加一个类并在需要的地方写入覆盖样式？ – 2014-10-27 21:35:50

我不知道该怎么做@KaiQing – 2014-10-27 21:43:54

这里是什么，我加入了类的身体和写作风格覆盖意味着一个基本的例子...

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

// css 

p{ 
    color:green; 
} 

.style2 p{ 
    color:red; 
}

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

来源

2014-10-27 21:53:21

这是一个完美的简单解决方案，谢谢。 @KaiQing – 2014-10-28 13:35:13

而不是使用“disabled”和undefined，使用true和false：

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; 
    } 
}

来源

2014-10-27 21:44:32

用一个按钮在样式表之间切换

回答

相关问题