JavaScript:单击按钮时无法更改 div 的背景颜色

Question

您好，我想在单击按钮时更改 div 的背景颜色，然后再次单击将其更改回来，但我无法完成...请提供帮助...谢谢!

window.onload = function (){
    var oBtn1 = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');
    var sDivClass = oDiv.className;

    oBtn1.onclick = function() {
        if (sDivClass == 'div1') {
            sDivClass = 'toGreen';
            oBtn1.value = 'to Red';
        } else {
            sDivClass = 'div1';
            oBtn1.value = 'To Green';
        }
    }
}

HTML:

<div class="div1" id="div1"></div>
<input id="btn1" type="button" value="To Green" />

CSS:

.div1 {
    width:100px;
    height: 100px;
    background-color: red;
}

.toGreen {
    width:100px;
    height: 100px;
    background-color: green;
}

Answer 1

您只是在更改局部变量的值，而不是与 DIV 关联的类。尝试

 oBtn1.onclick = function() {
                    if (oDiv.className === 'div1') {
                        oDiv.className = 'toGreen';
                        oBtn1.value = 'to Red';

                    } else {
                        oDiv.className = 'div1';
                        oBtn1.value = 'To Green';
                    }
 };