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/

使用JS切换页面颜色

1 个答案: