Metodo css
Il metodo css permette di ottenere
e modificare gli stili CSS di un elemento.
È importante ricordare che otterremo 'valori
calcolati' delle proprietà (computed style
properties), che potrebbero differire da
quelli specificati negli stili css.
Sintassi
Ottenere una singola proprietà:
$(selettore).css(proprietà);
Ottenere più proprietà, il parametro passato è un array di nomi di proprietà:
$(selettore).css(['width', 'height', 'color']);
Modificare una singola proprietà:
$(selettore).css(proprietà, nuovo valore);
Modifichiamo più proprietà, passandole come un oggetto
contenente coppie 'chiave: valore'. Il nome della proprietà
è specificato in CamelCase:
$(selettore).css({fontSize: '12px', color: 'red'});
Oppure, una variante alternativa:
<p class="www">testo</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Possiamo anche applicare una determinata funzione a ogni
elemento nel set. In questo caso, la funzione riceverà come primo parametro
l'indice dell'elemento nel set, e come secondo parametro
- il valore corrente della proprietà css specificata
per l'elemento specifico. Inoltre, this
all'interno della funzione si riferirà all'elemento corrente.
La proprietà CSS di ogni elemento cambierà in base
a ciò che la funzione restituisce per quell'elemento specifico:
$(selettore).css(nome proprietà, function(indice nel set, valore corrente proprietà css));
Esempio
Prendiamo tutti gli elementi con classe www
e cambiamo il loro colore in rosso:
<p class="www">testo</p>
$('.www').css('color', 'red');
Esempio
Prendiamo tutti gli elementi con classe www
e cambiamo il loro colore in rosso, e la dimensione del carattere
- a 20px:
<p class="www">testo</p>
$('.www').css({color:'red', fontSize:'20px'});
Oppure, una variante alternativa:
<p class="www">testo</p>
$('.www').css({'color':'red', 'font-size':'20px'});
