Nella lezione precedente, abbiamo visto come modificare la larghezza e l'altezza degli elementi HTML. In questa lezione, impariamo come modificare il loro stile CSS con il metodo .css().
Il metodo .css()
Con il metodo .css() di jQuery, come accennato prima, possiamo recuperare il valore di una proprietà CSS, impostare una nuova proprietà o modificarne una già esistente.
Recuperare una proprietà
Per recuperare il valore di una proprietà CSS, utilizziamo la sintassi:
$(selettore).css(nome_proprietà).Vediamo un esempio:
<p style="color:red">Un testo di esempio</p>
<script>
var coloreTesto = $("p").css("color");
alert(coloreTesto); // rgb(255, 0, 0)
</script>Nell'esempio, viene visualizzato rgb(255, 0, 0), che corrisponde al rosso.
Impostare una nuova proprietà
Per impostare una nuova proprietà CSS e quindi aggiungere un nuovo stile ad un elemento, si usa la seguente sintassi:
$(selettore).css(nome_proprietà, valore). Da usare se si vuole aggiungere un solo stile.$(selettore).css({nome_proprietà:valore, nome_proprietà:valore, ...}). Da usare se si vuole aggiungere più stili contemporaneamente.Ecco un esempio per un singolo stile:
<p style="color:red">Un testo di esempio</p>
<script>
$("p").css("background-color","yellow");
</script>Vediamo ora un esempio per due stili diversi:
<p style="color:red">Un testo di esempio</p>
<script>
$("p").css({"background-color":"yellow","font-size":"20px"});
</script>