Guide d'utilisation de la méthode css() de jQuery_jquery

Définition et usage

La méthode

css() renvoie ou définit un ou plusieurs attributs de style de l'élément correspondant.

Renvoyer la valeur de la propriété CSS

Renvoie la valeur de la propriété CSS du premier élément correspondant.

Remarque : les propriétés CSS abrégées (telles que "background" et "border") ne sont pas prises en charge lorsqu'elles sont utilisées pour renvoyer une valeur.

Copier le code Le code est le suivant :

$(sélecteur).css(nom)

nom requis. Spécifie le nom de la propriété CSS. Ce paramètre peut contenir n'importe quelle propriété CSS. Par exemple « couleur ».

Exemple
Obtenez la valeur de l'attribut de style de couleur du premier paragraphe :

Copier le code Le code est le suivant :

$("p").css("couleur");

Définir les propriétés CSS

Définit la propriété CSS spécifiée sur tous les éléments correspondants.

Copier le code Le code est le suivant :

$(sélecteur).css(nom,valeur)

nom requis. Spécifie le nom de la propriété CSS. Ce paramètre peut contenir n'importe quelle propriété CSS, telle que "color".

valeur facultative. Spécifie la valeur d'une propriété CSS. Ce paramètre peut contenir n'importe quelle valeur de propriété CSS, telle que "red".

Si la valeur de chaîne vide est définie, supprime l'attribut spécifié de l'élément.

Exemple
Définissez la couleur de tous les paragraphes sur rouge :

Copier le code Le code est le suivant :

$("p").css("color","rouge");

Utiliser des fonctions pour définir les propriétés CSS

Définissez la valeur de l'attribut style dans tous les éléments correspondants.
Cette fonction renvoie la valeur de la propriété à définir. Accepte deux paramètres, index est la position d'index de l'élément dans la collection d'objets et value est la valeur de l'attribut d'origine.

Copier le code Le code est le suivant :

$(selector).css(nom,fonction(index,valeur))

nom requis. Spécifie le nom de la propriété CSS. Ce paramètre peut contenir n'importe quelle propriété CSS, telle que "color".

Copier le code Le code est le suivant :

fonction (index, valeur)

Spécifie une fonction qui renvoie la nouvelle valeur d'une propriété CSS.
index - facultatif. Accepte la position d'index du sélecteur
oldvalue - facultatif. Accepte la valeur actuelle d'une propriété CSS.

Exemple 1
Définissez la couleur de tous les paragraphes sur rouge :

Copier le code Le code est le suivant :

$("bouton").click(function(){
$("p").css("color",function(){return "red";});
});

Exemple 2
Augmentez progressivement la largeur du div :

Copier le code Le code est le suivant :

$("div").click(function() {
$(this).css(
"width", function(index, value) {return parseFloat(value) * 1.2;}
);
});

Définir plusieurs paires propriété/valeur CSS

Copier le code Le code est le suivant :

$(selector).css({property:value, property:value, ...})

Définit l'objet paire nom/valeur comme attribut de style de tous les éléments correspondants.
C'est le meilleur moyen de définir un grand nombre de propriétés de style sur tous les éléments correspondants.

{propriété:valeur}
Requis. Spécifie l’objet paire nom/valeur à définir comme attribut de style.
Ce paramètre peut contenir plusieurs paires nom/valeur de propriété CSS. Par exemple {"color": "red", "font-weight": "bold">

Exemple

Copier le code Le code est le suivant :

$("p").css({
"couleur": "blanc",
"couleur-de-fond": "#98bf21",
"font-family": "Arial",
"font-size": "20px",
"rembourrage": "5px"
});

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.