jQuery récupère et définit les classes CSS

Avec jQuery, il est facile de manipuler les éléments CSS.

Opérations jQuery CSS

jQuery possède plusieurs méthodes pour manipuler le CSS. Nous allons étudier les suivantes :

  • addClass() - Ajouter une ou plusieurs classes à l'élément sélectionné
  • removeClass() - Supprimer une ou plusieurs classes de l'élément sélectionné
  • toggleClass() - Effectuer un basculement d'ajout/suppression de classes sur les éléments sélectionnés
  • css() - Définir ou renvoyer une propriété de style

Feuille de style d'exemple

Les règles de style suivantes seront utilisées 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 une classe à différents éléments. Bien sûr, vous pouvez également sélectionner plusieurs éléments lors de l'ajout de classes :

Exemple

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Essayez-le vous-même

Vous pouvez également spécifier plusieurs classes dans la méthode addClass() :

Exemple

$("button").click(function(){
  $("#div1").addClass("important blue");
});

Essayez-le vous-même

Méthode jQuery removeClass()

L'exemple suivant montre comment supprimer une classe spécifique dans différents éléments :

Exemple

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Essayez-le vous-même

Méthode jQuery toggleClass()

L'exemple suivant montre comment utiliser la méthode jQuery toggleClass(). Cette méthode effectue un basculement d'ajout/suppression de classes sur les éléments sélectionnés :

Exemple

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Essayez-le vous-même

Méthode jQuery css()

Nous expliquerons la méthode jQuery css() au chapitre suivant.

Guide de référence jQuery HTML

Pour obtenir le contenu complet des méthodes jQuery CSS, veuillez visiter notre Guide de référence jQuery CSS