Hvordan oppdatere DIV

October 30

Divs har erstattet tabeller som ramme bak webdesign. Du bruker divs å holde innhold som tekst, bilder og multimedia. Disse divs kan endres basert på brukerinteraksjon med siden. For eksempel kan klikke på en knapp endre teksten i div eller endre div farge. Du kan skrive inn koden for å lage både effekter.

Bruksanvisning

1 Åpne et eksisterende HTML-dokument eller opprette en ny en i en teksteditor.

2 Sett inn en tom div med ID "sampleDiv" og to knapper med klassen av "knapp" mellom kodene <body> og </ body>. Knappene vil utløse Javascript-funksjoner som kalles "changeText" og "changeColor" som følger:

</ Div>

<-knappen Type = "button" class = "button" onclick = "changeText ()"> Legg til tekst </ knapp>

<-knappen Type = "button" class = "button" onclick = "changeColor ()"> Endre farge </ knapp>

3 Sett inn følgende styling for div og knapper mellom kodene <head> og </ head> i HTML-dokumentet. Gjør div 200 piksler bred og 50 piksler dype med en svart ramme. Legg litt padding til knappene. Lag en stil for en klasse som heter "redColor" som endrer bakgrunnsfargen i et element til rødt.

sampleDiv {width: 200px; høyde: 50 piksler; border: thin solid black; padding: 20px 5px 5px 10px; }

.button {margin: 20px 0 0 0; }

.redColor {background-color: #Red; }

</ Style>

4 Sett følgende Javascript-funksjoner under stilene:

funksjon changeText () {

document.getElementById("sampleDiv").firstChild.nodeValue="You have added text successfully.";

}

funksjon changeColor () {

document.getElementById("sampleDiv").className="redColor";

}

</ Script>

Den første funksjonen legger tekst til div. Den andre skifter farge ved tilsetning av klassen av "redColor", som anvender «redColor" stil.

5 Lagre HTML-dokumentet og åpne den i nettleseren din. Klikk på hver knapp for å observere den tilsiktede effekt. Hele koden vil se slik ut:

<Html>

<Head>

sampleDiv {width: 200px; høyde: 50 piksler; border: thin solid black; padding: 20px 5px 5px 10px; }

.redColor {background-color: #Red; }

.button {margin: 20px 0 0 0; }

</ Style>

funksjon changeText () {

document.getElementById("sampleDiv").firstChild.nodeValue="You have added text successfully.";

}

funksjon changeColor () {

document.getElementById("sampleDiv").className="redColor";

}

</ Script>

</ Head>

<Body>

</ Div>

<-knappen Type = "button" class = "button" onclick = "changeText ()"> Legg til tekst </ knapp>

<-knappen Type = "button" class = "button" onclick = "changeColor ()"> Endre farge </ knapp>

</ Body>

</ Html>