javascript - 使用 JS 切换页面颜色

Question

我正在尝试使用 JS 通过单击一个按钮来更改我的页面的颜色主题，然后再次单击它以将其更改回来(即切换)。到目前为止，这是我的 JS 代码:

var i = 0;

function changeColor() {
    if (i%2 == 0) {
        switchBlue();
    } else {
        switchGreen();
    }
    i++;
}

function switchBlue() {
    document.getElementById('color-wrap-01').style.backgroundColor = "#07184a";
    document.getElementById('color-wrap-02').style.backgroundColor = "#006385";
    document.getElementById('color-wrap-03').style.backgroundColor = "#82baba";
    document.getElementById('color-wrap-04').style.backgroundColor = "#082644";
    document.getElementById('box').style.backgroundColor = "#d0dddd";
    document.getElementById('vl-01').style.borderLeft = "4px solid blue";
    document.getElementById('vl-02').style.borderLeft = "4px solid blue";

    var footerText = document.getElementsByClassName('footer-text');
    for (i = 0; i < 3; i++) {
        footerText[i].style.color = "#8eb7ba";
    }

    var headerText = document.getElementsByClassName('header-text');
    for (i = 0; i < 4; i++) {
        headerText[i].style.color = "#81babd";
    }

    var subTitle = document.getElementsByClassName('sub-title');
    for (i = 0; i < 11; i++) {
        subTitle[i].style.color = "#008688";
    }
}

function switchGreen() {
    document.getElementById('color-wrap-01').style.backgroundColor = "#074946";
    document.getElementById('color-wrap-02').style.backgroundColor = "#00865F";
    document.getElementById('color-wrap-03').style.backgroundColor = "#81BA88";
    document.getElementById('color-wrap-04').style.backgroundColor = "#084330";
    document.getElementById('box').style.backgroundColor = "#D7DDD0";
    document.getElementById('vl-01').style.borderLeft = "4px solid green";
    document.getElementById('vl-02').style.borderLeft = "4px solid green";
    var footerText = document.getElementsByClassName('footer-text');
    for (i = 0; i < 3; i++) {
        footerText[i].style.color = "green";
    }

    var headerText = document.getElementsByClassName('header-text');
    for (i = 0; i < 4; i++) {
        headerText[i].style.color = "green";
    }

    var subTitle = document.getElementsByClassName('sub-title');
    for (i = 0; i < 11; i++) {
        subTitle[i].style.color = "green";
    }
}

用这个 html:

 <div id="color-wrap-01">
     <div class="container">
             <div class="row top-header">
                 <div class="col-sm-6">
                <p align="left">Welcome, Guest <a href="https://www.google.ca/">Login</a>  <a href="https://www.google.ca/">Sign Up</a></p>
            </div>
            <div class="col-sm-6">
                <p align="right">Stay Updated: <a href="https://www.google.ca/">Subscribe via RSS</a> <a href="https://www.google.ca/">Email Updates</a></p>
        </div>
    </div>
</div>

还有这个按钮:

<button onclick="changeColor()">COLOUR</button>

第一次颜色更改有效，但之后按钮不会切换回绿色。感谢您的帮助!

Answer 1

如果你真的想在两种颜色之间切换，你可以这样做:

var colorSwitch = '';
function changeColor() {
    if (colorSwitch === '') {
        switchBlue();
        colorSwitch = 'blue';
    } else {
        switchGreen();
        colorSwitch = '';
    }
}

这只是一个想法，但您可能不需要迭代器。你可以在这里测试:https://jsfiddle.net/qwu41fno/