Méthode css() de jQuery

jQuery HTML/Méthodes CSS

La méthode css() de jQuery permet de récupérer ou de définir un ou plusieurs attributs de style de l'élément sélectionné.

lorsque vous utilisez la méthode css()Obtenirlorsque vous définissez la valeur de l'attribut, il retournerale premier élément sélectionnévaleur.

Utiliser la méthode css()Définirlorsque vous définissez la valeur de l'attribut, il seraTous les éléments sélectionnésDéfinir une ou plusieurs propriétés/pair de valeurs.

De même, jQuery peut interpréter également les formats CSS et DOM de propriétés à mots multiples de manière égale. Par exemple, jQuery peut comprendre css(" background",-color”）et css（" backgroundColor”）et retourner la valeur correcte.

Cependant, il ne prend pas en charge pleinement les abréviations CSS de raccourci (par exemple "background", "margin" et "border") et peut produire des résultats différents dans différents navigateurs.

Syntaxe :

Obtenir la valeur de la propriété CSS :

$.css(selector).css(property)

Définir les propriétés CSS et valeurs :

$.css(selector).css(property,　value)

Définir plusieurs propriétés CSS et valeurs :

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

Définir les propriétés CSS et valeurs en utilisant une fonction

$.css(selector).css(property,　function(index,　currentValue))

Exemple

Obtenir la couleur de fond du DIV cliqué en cliquant :

$("div").click(function(){
　　$.css("background-color");
});

Définir la propriété color de tous les paragraphes :

$("button").click(function(){
　　$("p").css("color",　"blue");
});

Définir plusieurs propriétés CSS et valeurs :

$("button").click(function(){
　　$("p").css({
　　　　"color":　"white",
　　　　"font-size":　"1.3em",
　　　　"background-color":　"#4285f4",
　　　　"padding":　"20px"　　
　　});
});

Obtenir la largeur, la hauteur, la couleur et la couleur de fond du DIV cliqué :

$("div").click(function(){
　　let　html　=　["Le div cliqué possède les styles suivants:"];
　　let　styleProps　=　$(this).css(["width",　"height",　"color",　"background-color]);
　　$.each(styleProps,　function(prop,　value)　{
　　　　html.push(prop　+　": "　+　value);
　　});
　　$("#result").html(html.join("<br>"));}}
});

Définir l'attribut CSS et la valeur en utilisant une fonction :

$("button").click(function(){
　　$("p").css("padding",　function(i,　val){
　　　　return　i　+　25;
　　});
});

Cliquez sur le bouton pour augmenter le remplissage de tous les paragraphes (en utilisant la fonction) :

$("button").click(function(){
　　$("p").css({
　　　　padding:　function(i,　val){
　　　　　　return　parseFloat(val)　*　1.2;
　　　　}
　　});
});

Valeur des paramètres

jQuery HTML/Méthodes CSS