Chapitre 8 – Manipulation des classes CSS

Manipuler des classes CSS est l’une des pratiques les plus courantes avec jQuery. Cela permet de changer l’apparence d’un élément, gérer des états (actif, erreur, succès), ou déclencher des animations CSS sans toucher directement au style.

1) Pourquoi manipuler des classes ?

Séparer le comportement (JS) du design (CSS)
Centraliser les styles dans les feuilles CSS
Faciliter la maintenance

2) addClass() – Ajouter une classe

$('#box').addClass('active');

Ajouter plusieurs classes :

$('#box').addClass('active highlight');

3) removeClass() – Supprimer une classe

$('#box').removeClass('active');

Supprimer toutes les classes :

$('#box').removeClass();

4) toggleClass() – Alterner une classe

$('#btn').on('click', function(){
  $('#box').toggleClass('active');
});

Très utilisé pour les menus, accordéons, dark mode, etc.

5) hasClass() – Tester la présence d’une classe

if ($('#box').hasClass('active')) {
  console.log('Box active');
}

6) Exemple concret – Bouton ON / OFF

<button id="toggle">Activer</button>
<div id="box">Contenu</div>

<style>
.active { background: #4caf50; color: white; }
</style>

<script>
$(function(){
  $('#toggle').on('click', function(){
    $('#box').toggleClass('active');
  });
});
</script>

7) Bonnes pratiques

Ne jamais utiliser jQuery pour écrire du CSS ligne par ligne
Utiliser des noms de classes explicites (is-active, has-error…)
Une classe = un état ou un rôle

Exercice – Gestion d’état

Créer un bouton et une carte
Au clic, activer/désactiver la carte
Changer le texte du bouton selon l’état

Résumé du chapitre

addClass() ajoute une classe
removeClass() supprime une classe
toggleClass() alterne une classe
hasClass() vérifie un état