Médiaforma

jQuery – Lire et modifier les classes

Print Friendly

Plusieurs méthodes jQuery permettent de manipuler les classes des éléments du DOM :

  • addClass() : ajoute la classe spécifiée en argument
  • removeClass() : supprime la classe de la sélection, si elle existe
  • toggleClass() : retire ou ajoute la classe de la sélection, selon si elle existe ou si elle n’existe pas

Pour vous entrainer à manipuler ces méthodes, saisissez le code suivant dans Notepad+++ et sauvegardez-le sous le nom manipule-classes.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Manipulation de l'attribut class</title>
    <style type="text/css">
      .rouge { color: red; }
      .vert { color: green; }
      .petit { font-size: 100%; }
      .grand {font-size: 300%; }
    </style>
  </head>
  <body>
    <div id="kevin">Kévin</div>
    <div id="eric">Eric</div>
    <div id="cathy">Cathy</div>
    <div id="julie">Julie</div>
    <div id="trich">Patricia</div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Ajouter le code jQuery ici

      });
    </script>
  </body>
</html>

 

Exécutez le code. Voici ce que vous devez obtenir :

 

A l’aide des méthodes addClass(), removeClass() et toggleClass(), modifiez les classes des éléments div pour obtenir ce résultat :

 

Voici le code à utiliser :

$('#kevin').removeClass('rouge').addClass('vert');
$('#eric').addClass('rouge').addClass('grand');
$('#cathy').removeClass('grand');
$('#julie').addClass('vert');
$('#trich').removeClass('vert').addClass('rouge').addClass('grand');

 

Remarque : Plusieurs autres variantes sont possibles.

Il est possible d’enlever ou d’ajouter plusieurs classes simultanément : précisez le nom des classes concernées dans les parenthèses en les séparant d’un espace. Par exemple :

addClass('bleu immense');

 

Simplifiez le code jQuery précédent :

$('#kevin').removeClass('rouge').addClass('vert');
$('#eric').addClass('rouge grand');
$('#cathy').removeClass('grand');
$('#julie').addClass('vert');
$('#trich').removeClass('vert').addClass('rouge grand');

 

Pour terminer, la méthode hasClass() renvoie la valeur true si la sélection a pour classe la valeur spécifiée en argument. Elle renvoie la valeur false dans le cas contraire.

 

Exercice : A titre d’exemple, appliquez la méthode hasClass() à tous les éléments div du document. Si un élément est de classe rouge, supprimez cette classe et remplacez-la par la classe vert.

Solution :

    $('div').each(function(){
  element=$(this);
  if (element.hasClass('rouge')) {
    element.removeClass('rouge');
    element.addClass('vert');
  }
});
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply