jQuery - Obtenir et définir des classes CSS
Avec jQuery, il est facile de manipuler le style des éléments.
jQuery Manipulation CSS
jQuery a plusieurs méthodes pour la manipulation CSS. Nous allons voir les méthodes suivantes :
addClass()- Ajoute une ou plusieurs classes aux éléments sélectionnésremoveClass()- Supprime une ou plusieurs classes des éléments sélectionnéstoggleClass()- Bascule entre l'ajout/la suppression de classes des éléments sélectionnéscss()- Définit ou renvoie l'attribut de style
Exemple de feuille de style
La feuille de style suivante sera utilisée pour tous les exemples de cette page :
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
Méthode jQuery addClass()
L'exemple suivant montre comment ajouter des attributs de classe à différents éléments. Bien sûr, vous pouvez sélectionner plusieurs éléments lors de l'ajout de classes :
Exemple
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Vous pouvez également spécifier plusieurs classes dans la addClass()méthode :
Exemple
$("button").click(function(){
$("#div1").addClass("important blue");
});
Méthode jQuery removeClass()
L'exemple suivant montre comment supprimer un attribut de classe spécifique de différents éléments :
Exemple
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
Méthode jQuery toggleClass()
L'exemple suivant montre comment utiliser la toggleClass()méthode jQuery. Cette méthode bascule entre l'ajout/la suppression de classes des éléments sélectionnés :
Exemple
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
Méthode jQuery css()
La méthode jQuery css()sera expliquée dans le chapitre suivant.
Exercices jQuery
Référence CSS jQuery
Pour un aperçu complet de toutes les méthodes CSS jQuery, veuillez consulter notre référence jQuery HTML/CSS .