Una delle funzioni più amate ed utilizzate dei framework JavaScript è senza dubbio la manipolazione degli stili CSS e della posizione degli elementi. Questo perché JavaScript nativo risente fortemente delle differenze nella sintassi e nelle reazioni dei vari browser.
Manipolare gli Stili
In jQuery il metodo principale è .css() che, analogamente ad .attr(), permette di ottenere o modificare gli stili CSS di un elemento:
$("a").css("color"); //restituisce il colore esadecimale del primo elemento link
$("a").css("color","#FF0000"); //imposta il colore dei link
$("a").css({
"color" : "#FF0000", //imposta il colore
"display" : "block" // imposta la visualizzazione
});Come si vede negli esempi, il metodo lavora con gli stessi nomi delle regole CSS dei fogli di stile. In realtà accetta anche i nomi che usa JavaScript per indicare alcune regole, come quelle degli sfondi:
//metodi equivalenti per impostare il colore di sfondo
$("a").css("background-color","#FF0000");
$("a").css("backgroundColor","#FF0000");Posizione e dimensione
Oltre a .css(), il framework dispone di alcuni metodi specifici relativi alle dimensioni e alla posizione degli elementi, che permettono di impostare o ottenere alcuni stili con facilità:
| Metodi | Descrizione |
|---|---|
| .width() .height() |
permette di trovare o impostare larghezza e altezza complessiva di un elemento in pixel |
| .innerWidth() .innerHeight() |
larghezza e altezza interne di un elemento (include il padding, non conta bordi e margini) |
| .outerWidth() .outerHeight() |
larghezza e altezza esterne di un elemento (conta bordi e padding, opzionalmente i margini passando l'argomento true) |
| .offset() | ritorna un oggetto con la distanza da sinistra e dall'alto dell'emento rispetto al documento |
| .position() | come .offset() ma le distanze sono relative al contenitore più prossimo |
| .scrollTop() .scrollLeft() |
trova o imposta scroll dell'elemento rispetto al documento |
A parte .offset() e .position(), tutti questi metodi si possono applicare anche ad elementi nascosti, in modo da poter ottenere ed impostare posione e dimensione prima di mostrarli. Ecco alcuni esempi pratici.