用JavaScript在两种颜色之间切换的最佳方法？

Question

Javascript初学者在这里。我本质上是想进行简单的切换。如果元素为黑色，则将其更改为白色。如果是白色，请将其更改为黑色。

function changeClass() {
    if (document.getElementById('myButton').style.backgroundColor == "white") {
        document.getElementById('myButton').style.backgroundColor = "black";
    } else {
        document.getElementById('myButton').style.backgroundColor = "white";
    }
}

<button class="normal" id="myButton" onclick='changeClass()' >Change Colour</button>

这段代码很混乱。有一个更好的方法吗？

Answer 1

切换课程：

function changeClass(){
  document.getElementById('myButton').classList.toggle("the-class");
}

您的CSS所在的位置：

.the-class {
    background-color: black;
}

...假设元素的正常背景颜色为白色。

更多关于classList 这里。支持很好，但是在较旧的环境中可能需要使用polyfill。

例：

function changeClass(){
  document.getElementById('myButton').classList.toggle("the-class");
}

.the-class {
    background-color: black;
}

function changeClass() {
  document.getElementById('myButton').classList.toggle("the-class");
}