Hvordan Endre Class navnet på en DIV Bruker Javascript

March 18

Cascading Style Sheet (CSS) klasser kan slå vanlige websider til spennende utstillinger av farge og variasjon. CSS lar deg legge til farge, grenser og andre visuelle egenskapene til HTML-elementer. For eksempel kan en klasse som heter "Red" lage en DIV element bakgrunnsfarge rød, mens en annen klasse som heter "streker" kan tegne en stiplet ramme rundt DIV. Utviklere definerer vanligvis en DIV klasse navn mens koding, men du kan bruke Javascript for å endre det klassenavnet til enhver tid.

Bruksanvisning

1 Åpne en av dine websider ved hjelp av en HTML-editor eller Javascript.

2 Legg en DIV til siden ved å lime inn følgende HTML-kode i dokumentet "body" -delen:

Denne teksten er inne i en div

</ Div>

Dette DIV refererer til en klasse som heter "blå". Den DIV id verdien er "TestDiv."

3 Legg denne CSS-koden til dokumentets "head" -seksjonen:

<Style>

.Blue {background-color: blue; farge: Gul; border-style: prikket; border-width: 1; }

.green {background-color: green; farge: Red; border-style: solid; border-width: 1; }

</ Style>

Dette skaper ".Blue" -klassen som brukes ved DIV. Den "blå" class setter DIV bakgrunnsfarge til blå og teksten til gult og plasserer en stiplet ramme rundt det. Den andre klassen, kalt "grønn", fører til ekstra element som refererer til det å vise en grønn bakgrunn, rød tekst og en solid ramme.

4 Legg denne Javascript-kode under forrige koden:

Var divName = "TestDiv";

Var newClassName = "grønn";

fungere changeClass () {

Var divReference = document.getElementById (divName);

divReference.className = newClassName;

}

</ Script>

Variabelen kalt "divName" inneholder id verdien av DIV du ønsker å endre. Den "newClassName" variabel inneholder navnet på den nye klassen du ønsker å bruke på DIV. Dette changeClass funksjonen erstatter DIV gamle klassenavnet med den nye.

5 Lagre dokumentet og vise den i en nettleser. Den DIV vil ha en blå bakgrunn, gul tekst og en stiplet ramme.

6 Klikk på websiden sin knapp. Javascript-koden går og endrer DIV klasse navn fra "blå" til "grønn". Når det skjer, til DIV s utseende endringer matche egenskapene som er definert i den "grønne" CSS-klasse.

Hint

Utviklere bruker dette navnet skiftende teknikk for å oppnå en rekke oppgaver. For eksempel ved å gjøre Javascript utføre en tilfeldig klasse navneendring, kan du føre en DIV å se annerledes ut hver gang en bruker besøker nettstedet ditt. Du kan også bruke Javascript-funksjonen for å utheve tekst i en DIV ved å tilordne den en klasse som setter bakgrunnsfargen til gult når en bruker klikker på en knapp.