3
votes

Comment annuler les modifications apportées au CSS par javascript

J'ai donc un bouton qui permet de basculer un thème sombre simple pour mon application Web.

function dark_mode() {
    document.body.style.background = "#2C2F33";}

Une fois que l'utilisateur clique, il activera cette fonction en javascript.

<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

Cela ne changera que l'arrière-plan. Je me demande si l'utilisateur clique sur le bouton une deuxième fois, il annulera les modifications apportées par la fonction. (c'est-à-dire activer / désactiver) Merci pour le temps et l'aide à l'avance!

javascript string html css

2 commentaires

Quel est le contexte censé être normalement? #FFFFFF (blanc)?

Vous pouvez utiliser la balise de données dans le bouton pour conserver le thème actuel et changer en conséquence.

4 Réponses :

3
votes

Il suffit de vérifier et de modifier le style en utilisant un opérateur ternaire:

function dark_mode() {
    document.body.style.background = document.body.style.background == "#2C2F33" ? "#FFFFFF" : "#2C2F33";
}

0 commentaires

2
votes

Si l'utilisateur clique à nouveau, la fonction est simplement appelée à nouveau. Donc, après le premier clic, il n'y a plus de changements.

Une meilleure façon serait d'assigner vos styles de mode sombre à une classe, dites "btn - dark-mode", puis d'utiliser js pour basculer cette classe: p>

<button id="dark-mode-toggle" class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

.btn--dark-mode {
  background-color: #2C2F33;
}

function dark_mode() {
document.querySelector('#dark-mode-toggle').classList.toggle('dark-mode'); // ie9+ only
}

Ceci appliquera la classe ou l'enlèvera selon qu'elle est déjà là.

1 commentaires

Cela ajoutera une classe .dark-mode au bouton car vous interrogez document.querySelector ('# dark-mode-toggle')

3
votes

Vous pouvez le faire en basculant la classe CSS, c'est une solution plus flexible

<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

.dark-mode {
  background: #2C2F33
 }

function dark_mode() {
  document.body.classList.toggle('dark-mode')
}

0 commentaires

2
votes

Vous pouvez utiliser des balises data pour suivre le thème actuel:

function dark_mode(ctrl) {
var darkTheme = ctrl.getAttribute("data-dark-theme"); 
  if(darkTheme== "on"){
    ctrl.setAttribute("data-dark-theme", "off"); 
    document.body.style.background = "#2C2F33";
    ctrl.innerHTML  = "Dark Mode OFF";
  }
  else {
    ctrl.setAttribute("data-dark-theme", "on"); 
    document.body.style.background = "#FFFFFF";
    ctrl.innerHTML  = "Dark Mode ON";
  }
}

JS:

<button class="btn btn-primary" onclick="dark_mode(this);" data-dark-theme="on" >Dark Mode ON</button>

Démo de travail

0 commentaires