删除按钮的第二次点击后附加样式表

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的这种行为。

插入和删除样式表像你正在做的事情相比，只是切换类。