- 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.
MODIFICARE DINAMICAMENTE GLI STILI DI UN ELEMENTO 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 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 |