- Modificare i CSS attraverso JavaScript -
 
COSA SERVE PER QUESTO TUTORIAL
Chiedi sul FORUM | Glossario Un browser web - conoscenze basiche riguardo ad Internet
Gli oggetti document, element, node e la proprietà innerHTML

PANORAMICA SU CSS
Cos'è e a cosa può servire

I fogli di stile CSS (Cascade Style Sheet) sono uno standard per specificare la presentazione visuale di documenti HTML. CSS è una tecnologia destinata all'uso da parte di chi è interessato alla visualizzazione precisa dei documenti HTML. Interessa i programmatori JavaScript lato client perché il DOM consente di utilizzare negli script gli stili applicati ai singoli elementi di un documento.
Utilizzati insieme, CSS e JavaScript permettono di generare svariati effetti visivi, impropriamente conosciuti come Dynamic HTML (DHTML). Questo consente di modificare dinamicamente colori e caratteri, di cambiare la posizione degli elementi e persino di nasconderli e mostrarli.

MODIFICARE DINAMICAMENTE GLI STILI DI UN ELEMENTO
La proprietà style

Ogni elemento rappresentato sulla pagina possiede una proprietà style. Questa proprietà fornisce l'accesso da parte dello script a tutte le proprietà CSS supportate per quell'elemento dal browser utilizzato. I valori delle proprietà sono gli stessi utilizzati per le specifiche di CSS, spesso con una sintassi diversa rispetto a simili impostazioni utilizzate dagli attributi dei tag HTML. Così, per impostare il colore del testo di un elemento il cui ID è "testo", la sintassi sarà la seguente:

document.getElementById("testo").style.color= "#ffff00 ";

Alcuni nomi di proprietà CSS non sono però conformi alle convenzioni di denominazione di JavaScript. Diverse proprietà CSS contengono trattini: in questi casi, l'equivalente di scripting della proprietà unisce le parole e applica la maiuscola all'inizio di ognuna. Per esempio, la proprietà di stile font-weight nello scripting viene impostata come di seguito:

document.getElementById("testo").style.fontWeight = "bold";

ANIMAZIONI DHTML
Come muovere dinamicamente oggetti della pagina

Tra le tecniche più potenti che si possono ottenere con JavaScript e CSS vi sono le animazioni. Non c'è nulla di particolare in riguardo alle animazioni DHTML: basta cambiare periodicamente una o più proprietà di stile di uno o più elementi. Così, per far scorrere un'immagine verso sinistra, s'incrementa la proprietà style.right dell'immagine ripetutamente, finché essa non raggiunge la posizione desiderata.


<< INDIETRO by Joker-81