Hvordan legge til stiler med Javascript

August 18

Fordi Javascript er en klient-side skriptspråk, det kan du få tilgang til og manipulere HTML-koden på en webside etter at den har lastet inn i nettleseren, og vises på skjermen. For eksempel kan du legge til stiler til HTML-elementer ved å merke et element med en "id", refererer elementet og legge til stil. Du kan direkte inkludere stilen eller definere en klasse og legge til klassen for å legge til stil.

Bruksanvisning

1 Opprett en HTML-side ved hjelp av en redaktør eller Notepad. Definer en klasse med en stil som skal legges og legge til tekst til websiden som du ønsker å style hjelp av Javascript. For eksempel inn:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> Legg Styles </ title>

<Style>

.highlight {background-color: #FFFFCC; }

</ Style>

</ Head>

<Body>

<Div id = "text1"> Marker denne teksten </ div>

<Div id = "text2"> Marker denne teksten for </ div>

</ Body>

</ Html>

2 Opprett en Javascript-funksjon og plassere den mellom <head> taggene. Få "id" av den første teksten til stil og legge styling parametre direkte til den. For eksempel inn:

funksjon style1 () {

var text1 = document.getElementById("text1");

text1.style.backgrouondColor = "#FFFFCC";

}

3 Opprett en ny Javascript-funksjonen for å få "id" av det andre elementet og legge til en CSS-klasse for å endre styling. For eksempel inn:

funksjon style2 () {

var text2 = document.getElementById("text2");

text2.class = "highlight";

}

</ Script>

4 Ring Javascript-funksjoner to rett før den avsluttende <body> for å gi HTML-siden tid å laste. For eksempel inn:

style1 ();

style2 ();

</ Script>