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 here的更多信息。支持很好，但是在较旧的环境中可能需要使用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>

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>

Answer 3

使用类似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>

Answer 4

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

您的DOM元素（HTML标记）具有方便的classList属性，可以将其视为附加到此DOM的类的列表。我建议多读一些here。

总体而言，您的函数可以这样写：

  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')

或仅具有相同toggle属性的classList函数

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

希望有帮助！干杯！

Answer 5

如果是白色，则不是可以使用的默认颜色？运算符：

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

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>

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

6 个答案: