🏆 Challenge #N11 · Manipuler les classes HTML · challenges/N11_classes.html JS · challenges/js/N11_classes.js


À faire

  • À faire
  • Terminé
  • En cours
  • Incomplet
  • Blocage

Mémo

document.getElementById("box").classList.add('banana'); // Ajoute la classe "banana" sur l'élément qui a l'ID "box"


document.getElementById("box").classList.remove('banana'); // Enlève la classe "banana" sur l'élément qui a l'ID "box"


document.getElementById("box").classList.contains('banana'); // Vérifie si la classe banana est sur l'élément qui a l'ID "box". Retourne un booléan


document.getElementById("box").classList.toggle('banana'); // Si la classe "banana" n'est pas sur l'élément, elle est ajoutée, si elle est sur l'élément, elle est retirée

1️⃣ Ajouter et enlever une classe

Lors du clic du bouton, la classe blue est ajoutée à la boîte, et si la classe est déjà ajoutée, le bouton l'enlève.

Selon l'état de la boîte, le bouton doit changer d'intitulé.

2️⃣ Gestion approfondie

2 modes d'affichage : quand l'un est activé, l'autre est désactivé. Un bouton activé doit avoir la classe is-active. Le mode green doit ajouter la classe green sur la boîte, et le mode blue la classe blue.

Qu'un seul mode peut être actif à la fois.

Si l'on clique sur un mode déjà activé, cela le désactive.

Une nouvelle version est disponible !

Mettez votre support à jour pour bénéficier des dernières corrections, améliorations, et nouveaux challenges !

Version locale

Publication 

Dernière version

Publication