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

添加变量：

var clicks = 0;

外面的夜间模式在nightmode里面放：

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

Answer 2

您可以通过添加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 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的此行为在body元素上存在一个类。

与仅切换类相比，插入和删除样式表就像你正在做的那样有相当大的开销。

在按钮的第二次单击时删除附加的样式表

3 个答案: