Hvordan dynamisk lage CSS-regler i kode

CSS-regler stylize oppsettet på en webside. Webdesignere kan opprette en CSS-fil eller inkludere inline CSS klasser i HTML-koden til en webside. For å opprette en CSS-regel dynamisk, du bruker Javascript, som har en "klasse" funksjon som kan laste CSS egenskaper inn på HTML-elementer. Denne funksjonen gir deg muligheten til å endre en CSS-regel "på sparket" når en side lastes eller når en bruker klikker på en knapp eller lenke.

Bruksanvisning

1 Høyreklikk på HTML-siden som du ønsker å dynamisk sette opp og klikk "Åpne med." Klikk på HTML, Javascript eller tekstredigeringsprogram på listen over programmer.

2 Lag variabelen som peker til HTML-elementet du vil dynamisk innstilt. Denne koden viser til en div tag og setter en variabel for elementet:

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

Erstatt "mydiv" med elementets ID på websiden.

3 Sett CSS-regel for elementet. Etter at du har Javascript-variablen for elementet, kan du endre noen av CSS egenskaper. For eksempel endrer følgende kode høyden på div element dynamisk:

myDiv.style.height = "350 piksler"

4 Link Javascript-funksjonen til en knapp eller lenke, og du kan da endre CSS-regel etter brukerundersøkelser dynamisk. For eksempel, kaller inn følgende kode en Javascript-funksjonen når brukeren klikker på en knapp som heter "changeStyle":

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