刪除按鈕的第二次點擊後附加樣式表

Question

我剛剛開始使用JS，我似乎無法弄清楚這一點。

我有一個非常簡單的腳本：

function nightmode() { 
    var oLink = document.createElement("link") 
    oLink.href = "nightmode2.css"; 
    oLink.rel = "stylesheet"; 
    oLink.type = "text/css"; 
    document.body.appendChild(oLink); 

和一個按鈕：

<button onclick="nightmode()">Night Mode</button> 

而且，這一切的一切，這個偉大工程。

但是，我想再次單擊以刪除樣式表。那麼有什麼辦法可以讓nightmode()在第二次運行中反轉自己，然後在第三次運行中正確運行，第四次反向運行？

謝謝！

Answer 1

你可以只需添加一個ID，並檢查它

function nightmode(){ 
    var el = document.getElementById('myStyles'); // get stylesheet 

    if (el !== null) {    // if it exists 
     el.parentNode.removeChild(el); // remove it 
    } else {       // if not, add it 
     var oLink = document.createElement("link") 

     oLink.id = 'myStyles'; 
     oLink.href = "nightmode2.css"; 
     voLink.rel = "stylesheet"; 
     oLink.type = "text/css"; 

     document.body.appendChild(oLink); 
    } 
} 

Answer 2

添加一個變量切換功能：夜間模式把裏面

var clicks = 0; 

外夜間模式 ：

if (clicks % 2 == 1) 
{ 
    //existing code 
} 
else 
{ 
    //remove css 
} 
clicks++; 

Answer 3

您可以使用Modulous（％）運算符來實現這一點，我增加點擊按鈕切換夜間模式的次數。

var nightModeCount = 0; 
function nightmode() { 

    if((nightModeCount % 2) == 1) { 
     //add the stylesheet 
     var oLink = document.createElement("link") 
     oLink.href = "nightmode2.css"; 
     oLink.rel = "stylesheet"; 
     oLink.type = "text/css"; 
     document.body.appendChild(oLink); 
    } else { 
     //find the stylesheet in the dom 
     var oLink = document.querySelectorAll("link[href=nightmode2.css]"); 
     //remove it 
     oLink.parentNode.removeChild(oLink); 
    } 

    nightModeCount++; 
} 

側面說明，它可能是更好的通過將您的正常和夜間模式CSS到相同的樣式，只是切換的一類主體元素上存在添加這個nightmode2.css的這種行爲。

插入和刪除樣式表像你正在做的事情相比，只是切換類。