Nwlapcug.com


Come creare dinamicamente le regole CSS nel codice

Le regole CSS stilizzare il layout di una pagina Web. Web designer può creare un file CSS o includere classi CSS inline all'interno del codice HTML di una pagina Web. Per creare una regola CSS in modo dinamico, è possibile utilizzare JavaScript, che ha una funzione di "classe" che può caricare proprietà CSS negli elementi HTML. Questa funzione vi dà la possibilità di modificare una regola CSS "on the fly" quando viene caricata una pagina o quando un utente fa clic su un pulsante o un collegamento.

Istruzioni

1

Pulsante destro del mouse la pagina HTML che si desidera impostare in modo dinamico e fare clic su "Apri con". Fare clic su editor di HTML, JavaScript o testo nell'elenco dei programmi.

2

Creare la variabile che indica l'elemento HTML che si desidera impostare in modo dinamico. Questo codice fa riferimento a un tag div e imposta una variabile per l'elemento:

myDiv var = document.getElementById("mydiv");

Sostituire "mydiv" con l'elemento ID nella pagina Web.

3

Impostare la regola CSS per l'elemento. Dopo aver ottenuto la variabile JavaScript per l'elemento, è possibile modificare le proprietà CSS. Per esempio, il codice seguente cambia dinamicamente l'altezza dell'elemento div:

myDiv.style.height="350px"

4

Collegare la funzione JavaScript a un pulsante o collegamento ed è quindi possibile cambiare dinamicamente la regola CSS dopo l'input dell'utente. Per esempio, il codice seguente chiama una funzione JavaScript quando l'utente fa clic su un pulsante denominato "changeStyle":

< input type = "button" onclick = "changeCSS" id = "changeStyle" >