用一個按鈕在樣式表之間切換

Question

我想用一個按鈕在兩個樣式表之間切換。我目前的代碼是：

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

但是，這會導致樣式表在暫停第一個和激活新的樣式表之間暫時消失。

有沒有更好的方法來做到這一點？理想情況下，我只是爲第二個樣式表添加一小段樣式，因爲我只需要更改字體顏色等一些東西。

Answer 1

這裏是什麼，我加入了類的身體和寫作風格覆蓋意味着一個基本的例子...

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

// css 

p{ 
    color:green; 
} 

.style2 p{ 
    color:red; 
} 

jQuery的切換類文檔：http://api.jquery.com/toggleclass/

Answer 2

而不是使用「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; 
    } 
}