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

 <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的類列表。 我建議在這里閱讀更多相關內容。

總的來說，您的功能可以寫成：

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

希望能幫助到你！ 干杯!

Answer 5

如果白色不是你可以重構使用的defualt顏色？ 運營商：

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>