Affiche une chaîne de caractères
Les méthodes addClass() et removeClass permettent de manipuler les classes d’un élément HTML pour ajouter ou supprimer une classe
Ce chapitre examine la méthode addClass (), qui est l'une des méthodes utilisées pour gérer les effets visuels avec jQuery.
La méthode AddClass() permettent d'animer les modifications apportées aux propriétés CSS.
La méthode addClass() ajoute une ou plusieurs classes
aux éléments html sélectionnés.
Cette méthode ne supprime pas les attributs de classe existants, il ne fait qu'ajoute une ou plusieurs valeurs pour l'attribut class.
Tip : Pour ajouter plus d'une classe, séparer les noms de classes avec un espace.
Syntaxe
$(sélecteur).addClass(class)
Description :Ajoute la classe spécifiée à chacun de l'ensemble des éléments sélectionnés.
className Un ou plusieurs noms de classe à être ajouté à l'attribut de classe de chaque élément correspondant.
fonction (index, currentClass) Une fonction renvoyant un ou plusieurs noms de classes à être ajoutés au noms de classe existante séparés par des espaces. Reçoit la position d'index de l'élément dans le jeu et le nom de classe existant comme arguments. Au sein de la fonction, on utilise this pour désigner l'élément en cours dans le jeu.
NOTE: Il est important de noter que cette méthode ne remplace pas une classe. Il ajoute simplement la classe, il l'ajout à tout ce qui peut être déjà existant dans les éléments.
Plus d'une catégorie peut être ajoutée à une à l'ensemble d'éléments sélectionnés, elles doivent être séparées par un espace, comme suit :
$("p").addClass("maClass votreClass");
Cette méthode est souvent utilisée avec .removeClass() pour basculer les classes des éléments de l'un à l'autre, comme suit :
$("p").removeClass("maClass noClass").addClass("votreClass");
Ici, les classes maClass et noClass
sont supprimés de tous les paragraphes, tandis que la
classe votreClass est ajouté.
A partir de la version jQuery 1.4, la
méthode .addClass() peut
recevoir une fonction.
$("ul li:last").addClass(function() {
return "item-" + $(this).index();
});
Si on a une liste non ordonnée avec cinq éléments <li> , cet exemple ajoute la classe "item-4" au dernièr <li> .
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery demo
</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script >
$(document).ready(function(){
$("button").click(function(){
$("p:last").addClass("selected");
});
});
</script>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:#f00; }
.highlight { background:yellow; }
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p class="highlight">Ceci est un troisième
paragraphe.</p>
<button>Ajouter calasse au dernier
élément p</button>
</body>
</html>
Dans l'exemple ci dessus nous
avons ajouter la classe selected qui donne une couleur rouge
au dernier paragraphe p qui a déjà une classe
qui donne une couleur jaune au background,
addclass'() n'a pas
supprimé la classe existante.
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery demo
</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script >
$(document).ready(function(){
$("button").click(function(){
$('p').addClass(function(n){
return 'Class_' + n;
});
});
});
</script>
<style type="text/css">
.Class_0
{
color:blue;
}
.Class_1
{
color:red;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Ajouter calasses à
l'élément p</button>
</body>
</html>
Dans l'exemple ci-dessus: function(n)
retourne la valeur class_n n étant
l'index de
l'élément
sélectionné.
La méthode addclass() va ajouter la class_0
à l'élément p
avec index = 0 et la class_1 à
l'élément p avec index =
1
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery demo
</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script >
$(document).ready(function(){
$("button").click(function(){
$("p:last").addClass("selected highlight");
});
});
</script>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:#f00; }
.highlight { background:yellow; }
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Ceci est un troisième
paragraphe.</p>
<button>Ajouter les calasse au dernier
élément p</button>
</body>
</html>
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery demo
</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script >
$(document).ready(function(){
$("button").click(function(){
$("p:first").removeClass("intro").addClass('main');
});
});
</script>
<style type="text/css">
.intro
{
color:red;
}
.main
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p class="intro">Ceci est un
paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Ceci est un troisième
paragraphe.</p>
<button>Ajouter les calasse au dernier
élément p</button>
</body>
</html>
La méthode removeClass() supprime une ou plusieurs classes des éléments sélectionnés.
Syntaxe
$(sélecteur).removeClass(classname)
| Paramètre | Description |
|---|---|
| ClassName |
Facultatif. Spécifie un ou plusieurs noms de classe à supprimer.
Pour supprimer plusieurs classes, séparer les noms de classe avec
des espaces. |
Note : Si ce paramètre est vide, toutes les classes seront supprimées.
Si un nom de classe est inclus comme paramètre, alors seule cette classe sera retirée de l'ensemble des éléments sélectionnés. Si aucun nom de classe n'est spécifié dans le paramètre, toutes les classes seront alors supprimées.
Plus d'une catégorie peut être retirée à la fois, séparée par un espace, de l'ensemble des éléments désignés, comme suit :
$('p').removeClass('myClass yourClass')
La méthode .removeClass() est souvent utilisée avec .addClass() pour basculer entre les classes des éléments de l'un à l'autre, comme suit :
$('p').removeClass('myClass noClass').addClass('yourClass');
Ici, les classes myClass et noClass sont supprimées de tous les paragraphes, tandis que yourClass est ajoutée dans tous les paragraphes.
Mais au lieu de cela et pour remplacer toutes les classes existantes par une autre classe, nous pouvons utiliser .attr('class', 'newClass').
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.light { background:yellow; }
</style>
</head>
<body>
<p class="blue under">Bonjour</p>
<p class="blue under light">comment ça va?</p>
<p class="blue under"> alors </p>
<p class="blue under">à bien tot</p>
<script>$("p:even").removeClass("blue");</script>
</body>
</html>
Dans cet exemple nous enlevons la classe blue de paragraphe dont l’index est paire .
Pour supprimer les classe blue et under de paragraphe dont l’index est impaire, remplacer le code par :
<script>$("p:odd").removeClass("blue under");</script>
Pour supprimer toutes les classes de l’élément dont l’index est 1 remplacer le code par :
<script>$("p:eq(1)").removeClass();</script>
Une fonction peut être utilisée pour de retirer une classe des éléments sélectionnés.
En jQuery 1.4, la méthode .removeClass() permet d'indiquer la classe à être enlevé en passant une fonction comme paramètre.
Syntaxe
$(sélecteur).removeClass(function(index,oldclass))
| Paramètre | Description |
|---|---|
| function(index,oldclass) |
Une fonction qui retourne un ou plusieurs noms de classe à
supprimer.
|
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script >
$(document).ready(function(){
$("button").click(function(){
$("li").removeClass(function(n) {
if (n==0||n==1) {return "listitem"}
else {return ""}
});
});
});
</script>
<style type="text/css">
.listitem
{
color:red;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<ul>
<li class="listitem">Piere</li>
<li class="listitem">Luis</li>
<li class="listitem">Michel</li>
<li class="listitem">Steve</li>
</ul>
<button>Suprimer la class "listitem" des éléments li avec index
0 et 1</button>
</body>
</html>
Exemple :
Comment utiliser addClass() et removeClass() pour supprimer une class et ajoutez une nouvelle classe.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script >
$(document).ready(function(){
$("button").click(function(){
$("p:first").removeClass("intro").addClass('main');
});
});
</script>
<style type="text/css">
.intro
{
color:red;
}
.main
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p class="intro">Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Change class du 1er élément p</button>
</body>
</html>