Operazioni CSS jQuery - metodo css()

Manuale di riferimento per le operazioni CSS di jQuery

Esempio

Impostare il colore dell'elemento <p>:

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

Prova tu stesso

Definizione e uso

Il metodo css() restituisce o imposta uno o più attributi di stile degli elementi corrispondenti.

Restituisce il valore dell'attributo CSS

Restituisce il valore dell'attributo CSS dell'elemento corrispondente al primo match.

Nota:Quando utilizzato per restituire un valore, non supporta gli attributi CSS abbreviati (ad esempio, "background" e "border").

$(selettore).css(name)
Parametro Descrizione
name Obbligatorio. Specificare il nome dell'attributo CSS. Il parametro può includere qualsiasi attributo CSS. Ad esempio, "color".

Esempio

Ottenere il valore dell'attributo di stile color del primo paragrafo:

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

Prova tu stesso

Impostare attributi CSS

Imposta la proprietà CSS specificata per tutti gli elementi corrispondenti.

$(selettore).css(name,value)
Parametro Descrizione
name Obbligatorio. Specifica il nome della proprietà CSS. Questo parametro può includere qualsiasi proprietà CSS, come "color".
value

Opzionale. Specifica il valore della proprietà CSS. Questo parametro può includere qualsiasi valore di proprietà CSS, come "red".

Se viene impostato un valore vuoto, viene rimosso l'attributo specificato dall'elemento.

Esempio

Imposta il colore di tutti i paragrafi in rosso:

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

Prova tu stesso

Imposta proprietà CSS utilizzando una funzione

Imposta il valore della proprietà di stile per tutti gli elementi corrispondenti.

Questa funzione restituisce il valore dell'attributo da impostare. Accetta due parametri, index è la posizione dell'elemento nell'insieme dell'oggetto, value è il valore originale dell'attributo.

$(selettore).css(name,function(index,value))
Parametro Descrizione
name Obbligatorio. Specifica il nome della proprietà CSS. Questo parametro può includere qualsiasi proprietà CSS, come "color".
function(index,value)

Specificare la funzione che determina il nuovo valore della proprietà CSS.

  • index - Opzionale. Accetta la posizione dell'indice del selettore
  • oldvalue - Opzionale. Accetta il valore corrente della proprietà CSS.

Esempio 1

Imposta il colore di tutti i paragrafi in rosso:

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

Prova tu stesso

Esempio 2

Aumenta gradualmente la larghezza del div:

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

Prova tu stesso

Imposta più coppie di proprietà/valore CSS

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

Imposta le proprietà di stile "nome/valore" su tutti gli elementi corrispondenti.

Questo è il modo migliore per impostare un gran numero di proprietà di stile su tutti gli elementi corrispondenti.

Parametro Descrizione
{property:value}

Obbligatorio. Specifica l'oggetto "nome/valore" da impostare come proprietà di stile.

Questo parametro può includere una serie di coppie di nome/valore di proprietà CSS. Ad esempio {"color":"red","font-weight":"bold"}

Esempio

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

Prova tu stesso

Manuale di riferimento per le operazioni CSS di jQuery