用javascript切换两种颜色的最佳方法？

Question

Javascript beginner here. I essentially want to make a simple switch. If an element is black, change it to white. If it is white, change it to black.

 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> 

This code is quite messy though. Is there a better way to do this?

Answer 1

Toggle a class:

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

where your CSS is:

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

...assuming the element's normal background color is white.

More about classList here . Support is good, but you may need a polyfill in older environments.

Example:

 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

You can use 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

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> 

Answer 4

You can create some specific class in your css (say, .black class which contains a background-color: black; rule) and then attach/detach that class based on your condition.

Your DOM element (HTML tag) have a handy classList property, which can be treated as a list of classes attached to this DOM. I suggest to read a bit more about it here .

Overall, your function can be written like:

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

or even a little more concise with a ternary operator

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

or just with a toggle function of the same classList property

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

Hope it helps! Cheers!

Answer 5

and if white it's not the defualt color you can refactor using ? operator:

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

Answer 6

For this action not needed external javascript you can write simple inline javascript here the code:

 .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>