DébutantNon commencé

Exercice 7.4 · 6 min · 0 tentative

Gérer les classes

🎯 Objectif

Ajouter et retirer des classes CSS avec classList.

📖 Contexte

classList permet de gérer les classes d'un élément :

const bouton = document.querySelector("button")

// Ajouter une classe
bouton.classList.add("actif")

// Retirer une classe
bouton.classList.remove("desactive")

// Basculer (ajoute si absente, retire si présente)
bouton.classList.toggle("visible")

// Vérifier si une classe existe
bouton.classList.contains("actif")  // true

Pourquoi classList ?

styleclassList
Modifie le CSS inlineUtilise des classes CSS
Un seul style à la foisPlusieurs styles groupés
Difficile à maintenirRéutilisable, maintenable

📝 Consigne

  1. Ajoute la classe "highlight" à la carte
  2. Ajoute la classe "active" à la carte
  3. Retire la classe "visible"

Résultat attendu :

  • La carte devient jaune (highlight) et légèrement agrandie (active)
  • La console affiche les classes avant et après modification

Objectifs

  • Ajouter highlight
  • Ajouter active
  • Retirer visible
  • La carte a la classe highlight
  • La carte a la classe active

Lis bien les instructions et lance-toi !

Indices (0/3)

Indice 1 verrouillé
Indice 2 verrouillé
Indice 3 verrouillé