Metodo css() di jQuery

Metodi HTML/CSS jQuery

Il metodo css() di jQuery ottiene o imposta uno o più attributi di stile degli elementi selezionati.

Quando si utilizza il metodo css()OttieniAl valore proprietà, essa restituiràIl primo elemento selezionatoIl valore.

Utilizzando il metodo css()ImpostaAl valore proprietà, essa saràTutti gli elementi selezionatiImposta uno o più coppie proprietà/valore.

Allo stesso modo, jQuery può interpretare CSS e formato DOM multi-parole in modo equivalente. Ad esempio, jQuery può comprendere css(" background-color") e css(" backgroundColor") e restituire il valore corretto.

Ma non supporta completamente le abbreviazioni CSS brevi (ad esempio "background", "margin" e "border") e può produrre risultati diversi in diversi browser.

Sintassi:

Ottieni valore proprietà CSS:

$(selector).css(property)

Imposta proprietà CSS e valori:

$(selector).css(property, value)

Imposta più proprietà CSS e valori:

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

Imposta proprietà CSS e valori utilizzando una funzione

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

Esempio

Clicca per ottenere il colore di sfondo del DIV:

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

Imposta la proprietà color di tutti i paragrafi:

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

Imposta più proprietà CSS e valori:

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

Ottieni la larghezza, l'altezza, il colore e il colore di sfondo del DIV cliccato:

$("div").click(function() {
　　let html = ["Il div cliccato ha i seguenti stili:"];
　　let styleProps = $(this).css(["width", "height", "color", "background-color"]);
　　$.each(styleProps, function(prop, value) {
　　　　html.push(prop + ": \
　　});
　　$("#result").html(html.join("<br>"));}}
});

Imposta attributi CSS e valori utilizzando una funzione:

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

Clicca sul pulsante per aumentare il riempimento di tutti i paragrafi (usando la funzione):

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

Valore del parametro

Metodi HTML/CSS jQuery