如何使用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>

这段代码比较混乱，有更好的方法吗？

- Simon Kiely

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;
}

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

- T.J. Crowder

Answer 2

您可以使用classList.toggle()。

document.querySelector('#myButton').addEventListener('click',e => {
  e.target.classList.toggle('black')

})

.black{
  background:black
}

<button class="normal" id="myButton">Change Colour</button>

- Maheer Ali

---

可以接受这个，因为它还详细说明了如何从HTML中删除onclick，这很好，因为直接将JS链接到HTML通常被认为是不良实践。 - TimB

Answer 3

你可以在CSS中创建一些特定的类（比如，.black类包含一个background-color: black;规则），然后根据条件附加/分离该类。

你的DOM元素（HTML标签）有一个方便的classList属性，它可以被视为附加到此DOM的类列表。我建议你在这里阅读更多相关信息。

总的来说，你的函数可以写成：

  const element = document.getElementById("coolDiv");
  element.classList.contains('black')) {
    element.classList.remove('black')
  } else {
    element.classList.add('black')
  }

或者使用三元运算符更加简洁

  const element = document.getElementById("coolDiv");
  element.classList.contains('black') ?
    element.classList.remove('black') : element.classList.add('black')

或者只需使用相同的classList属性和一个toggle函数

  const element = document.getElementById("coolDiv");
  element.classList.toggle('black')

希望能有所帮助！干杯！

- syntax-punk

Answer 4

Use something like classList.toggle()

function switchColor(){
  document.getElementById("resultDiv").classList.toggle("toggle")
}

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

.element.toggle{
  background-color: blue !important;
}

<button onclick="switchColor()">Click me</button>
<div id="resultDiv" class="element toggle"></div>

- MauriceNino

Answer 5

如果白色不是默认颜色，您可以使用 ? 运算符进行重构：

let btn = document.getElementById('myButton');
btn.style.backgroundColor = btn.style.backgroundColor === 'white' ? 'black' : 'white';

- GJCode

Answer 6

对于这个操作不需要外部JavaScript，您可以在此处编写简单的内联JavaScript代码：

.black-button { 
  background: black; 
  color: #fff; 
  outline: 0;
  padding: 20px;
}
button {
  transition: 0.3s;
  cursor: pointer;
}

<button class="normal" onclick="this.classList.toggle('black-button')">Change Colour</button>

- Md. Abu Sayed