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');
}
});
