javascript - 如何通过更改全局变量来更改 CSS 属性？

Question

我有一个按钮，当按下它时，它会在 true 和 false 之间改变一个变量。当 true 时，我希望测试显示蓝色，当 false 时，我希望文本显示黑色。我不确定为什么，但尽管变量发生了变化，但文本仍保持蓝色。这是我的代码:

<div id="test1">Hello</div>
<button onclick="change()">Change</button>

<script>

var swap = true;
function change(){
    if(swap === true){
        swap = false;
    }
    else{
        swap = true;
    }

    document.getElementById('test1').innerHTML = swap;  
}

if(swap === true){
    document.getElementById("test1").style.color = "blue";
}

else if(swap === false){
    document.getElementById("test1").style.color = "black";
}
</script>

Answer 1

因为样式更改不在函数内，所以它在页面加载时调用一次，而不是在单击按钮时调用。尝试在函数内移动 if/else 条件。