JavaScript  »  Guide  »  Guida jQuery 

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à:

• .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.

Altri articoli

Altre guide

Altre newsletter