Modifier les propriétés de style

La fonction css(), dotée de certains paramètres, permet également de modifier des propriétés de style d’éléments de la page.

css({propriété de style})

Cette fonction modifie les propriétés de style CSS d’un élément donné en utilisant la notation CSS clé/valeur pour les propriétés de style à modifier.

$("p").css({ color: "red", background: "blue" });
 

Il faut remarquer la présence des accolades habituelles pour les déclarations de style.

Si la clé contient un trait d’union comme par exemple background-color, l’ensemble doit être placé entre des guillemets (soit "background-color").

La notation JavaScript (CamelCase) peut également être adoptée, soit backgroundColor au lieu de background-color.

Cette méthode renvoie un objet jQuery.

Depuis la version 1.6 de jQuery, on peut utiliser des valeurs relatives pour modifier la valeur d’une propriété de style CSS. Celle-ci peut se noter avec "+=" ou "-=" par rapport à la valeur courante.

$ ("#item").css("left", "+=10px")
 

Dans cet exemple nous déplaçons, l’élément item de 10 pixels vers la gauche.

Exemple

Illustrons cette méthode jQuery par un exemple. Au survol d’un paragraphe, celui-ci est doté d’un arrière-plan...