Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

MODIFIER LES STYLES CSS DES ELEMENTS HTML AVEC JQUERY

Ajouter un ou plusieurs attributs class à des éléments HTML en jQuery

Parmi les attributs HTML, l’attribut class est certainement le plus important lorsqu’on travaille avec le jQuery.

En effet, rappelons nous que le jQuery va cibler des éléments HTML en s’appuyant sur des sélecteur CSS, et donc notamment sur des attributs class.

Ainsi, le jQuery dispose d'une méthode spécialement créée pour ajouter un attribut class à un ou plusieurs éléments : la méthode addClass().

Cette méthode va prendre en argument la valeur de l'attribut class qu’on souhaite ajouter à l’élément.

Notez qu’on va également pouvoir spécifier plusieurs valeurs et donc plusieurs attributs class afin qu’un élément hérite de différents styles CSS.

Regardons immédiatement un exemple ensemble :

Utilisation de la méthode jQuery addClass()

On peut ajouter des classes CSS avec addClass() en jQuery à des éléments HTML

Essayer ce code

Comme vous pouvez le remarquer, pour ajouter plusieurs attributs class d'un coup, il suffit de mentionner les différentes valeurs à la suite en arguments de la méthode addClass().

Retirer un ou plusieurs attributs class appliqués à des éléments HTML en jQuery

Nous allons également pouvoir retirer un ou plusieurs attributs class passés à des éléments HTML grâce à la méthode jQuery removeClass().

Cette méthode s’utilise de façon analogue à la méthode addClass().

Utilisation de la méthode jQuery removeClass()

On utilise la méthode jQuery removeClass() pour supprimer une classe d’un élément HTML

Essayer ce code

Changer l’état d'affectation d’un attribut class en jQuery

Le jQuery nous fournit également une méthode nous permettant de modifier l’état d'affectation d’un attribut class à un ou plusieurs éléments HTML, c’est-à-dire de l’ajouter si il n’est pas présent ou de le supprimer si il l’est.

Cette méthode est la méthode toggleClass() et va une nouvelle fois pouvoir s’utiliser comme les deux précédentes.

Utilisation de la méthode jQuery toggleClass()

Au départ, seule notre classe defaut est active

Lorsqu’on utilise toggleClass(), les classes actives sont supprimées et celles non présentes sont ajoutées

Essayer ce code

Dans l’exemple ci-dessus seul mon attribut class='defaut' va donner ses styles à mon div au départ. Lorsqu’on clique sur le bouton, toggleClass() va s'exécuter et supprimer l'attribut class='defaut' de mon div et ajouter ceux qui n'étaient pas affectés, c'est-à-dire class='orange', class='gras' et class='centre'.

Lire, définir ou modifier la valeur d’une propriété CSS avec la méthode jQuery css()

La méthode css() va pouvoir agir comme getter ou comme setter selon le nombre d'arguments qu’on va lui fournir.

Si on ne passe que le nom d’une propriété CSS en argument à la méthode css(), celle-ci agit comme getter en renvoie la valeur relative à la propriété renseignée.

Pour que la méthode css() agisse comme un setter, il va falloir également lui passer en second argument une valeur relative à la propriété renseignée. Dans ce cas, la valeur passée sera définie comme nouvelle valeur pour la propriété passée en premier argument.

Regardons immédiatement un premier exemple ensemble :

Utilisation de la méthode jQuery css()

On utilise la méthode css() en tant que getter et setter

Essayer ce code

Ici, on utilise une première fois la méthode css() en tant que getter pour récupérer la valeur relative à la taille de nos paragraphes, puis une deuxième fois en tant que setter pour définir une nouvelle couleur pour nos paragraphes.

On va également pouvoir définir plusieurs valeurs pour plusieurs propriétés d’un coup avec css(). Dans ce cas, la syntaxe est légèrement différente :

On peut définir plusieurs propriétés CSS d’un coup avec la méthode jQuery css()

On change la couleur et le poids de nos textes grâce à css() en jQuery

Essayer ce code

Vous pouvez remarquer ici l’utilisation obligatoire d’une paire d’accolades. Notez également qu’on sépare les différentes propriétés par une virgule.

Faites bien attention à un point cependant lorsque vous utilisez css() : cette méthode supporte encore assez mal les notations short-hand des propriétés CSS (comme background par exemple) et peut ainsi produire des résultats inattendues si vous l’utilisez dans ces cas là.

Chapitre précédent

Chapitre suivant