Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Manipolare i CSS

Intervenire sui CSS per modificarli
Intervenire sui CSS per modificarli
Link copiato negli appunti

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.


Ti consigliamo anche