Avec jQuery, il est facile de manipuler le CSS d'éléments.
jQuery Manipuler CSS
jQuery a plusieurs méthodes pour la manipulation des CSS. Nous allons examiner les méthodes suivantes:
- addClass() - Ajoute une ou plusieurs classes aux éléments sélectionnés
- removeClass() - Supprime une ou plusieurs classes à partir des éléments sélectionnés
- toggleClass() - Bascule entre l' ajout / suppression des classes à partir des éléments sélectionnés
- css() - Définit ou retourne l'attribut de style
Exemple Stylesheet
La feuille suivante sera utilisée pour tous les exemples sur cette page:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}jQuery addClass() Méthode
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 des 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 le addClass() méthode:
Exemple
$("button").click(function(){
$("#div1").addClass("important blue");
});
Essayez - le vous - même » jQuery removeClass() Méthode
L'exemple suivant montre comment supprimer un attribut de classe spécifique à partir de différents éléments:
Exemple
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
Essayez - le vous - même » jQuery toggleClass() Méthode
L'exemple suivant montre comment utiliser le jQuery toggleClass() méthode. Cette méthode permet de basculer entre l'ajout / suppression des classes à partir des éléments sélectionnés:
Exemple
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
Essayez - le vous - même » jQuery css() Méthode
Le jQuery css() méthode sera expliqué dans le chapitre suivant.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
jQuery CSS Référence
Pour un aperçu complet de toutes les méthodes jQuery CSS, s'il vous plaît visitez notre jQuery HTML / CSS Référence .