4
votes

Le meilleur moyen de basculer entre deux couleurs avec javascript?

Javascript débutant ici. Je veux essentiellement faire un simple changement. Si un élément est noir, changez-le en blanc. S'il est blanc, changez-le en noir.

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

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

Ce code est cependant assez compliqué. Y a-t-il une meilleure manière de faire cela?

javascript css

0 commentaires

6 Réponses :

5
votes

Bascule une classe:

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

où se trouve votre CSS:

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

... en supposant que la couleur d'arrière-plan normale de l'élément est le blanc.

En savoir plus sur classList ici . Le support est bon, mais vous aurez peut-être besoin d'un polyfill dans des environnements plus anciens.

Exemple:

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

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

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

0 commentaires

4
votes

Vous pouvez utiliser classList.toggle()

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

.black{
  background:black
}

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

})

1 commentaires

Accepterait celui-ci, car il détaille également comment supprimer cet onclick du HTML, ce qui est bon car lier directement JS au HTML est généralement considéré comme une mauvaise pratique.

1
votes

et si le blanc n'est pas la couleur par défaut que vous pouvez refactoriser en utilisant? opérateur:

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

0 commentaires

2
votes

Utilisez quelque chose comme classList.toggle()

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

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

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

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

0 commentaires

2
votes

Vous pouvez créer une classe spécifique dans votre css (par exemple, la classe .black qui contient une règle background-color: black; ), puis attacher / détacher cette classe en fonction de votre état.

Votre élément DOM (balise HTML) a une propriété classList pratique, qui peut être traitée comme une liste de classes attachées à ce DOM. Je suggère de lire un peu plus à ce sujet ici .

Dans l'ensemble, votre fonction peut s'écrire comme:

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

ou même un peu plus concis avec un opérateur ternaire

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

0 commentaires

0
votes

Pour cette action javascript externe non nécessaire, vous pouvez écrire du javascript en ligne simple ici le code:

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

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

0 commentaires