Hvordan Styr hvert element i DIV

April 27

Webdesignere ofte bruke Javascript koding for å generere innhold dynamisk når en bruker gjør litt action på en webside, for eksempel klikke på en knapp. Men Java også kan trekke tekst, fjerne ett element om gangen eller flere simultaneously.you kan fjerne en div som inneholder flere elementer, for eksempel en overskrift, bilde og tekst, med ett klikk. Du kan også overskrive den med nytt innhold. Bruk enkle eksempler for å øve begge teknikkene.

Bruksanvisning

Clear Div innhold

1 Opprett en Javascript-funksjon kalt "clearDiv" i hodet kodene på HTML-siden. Har funksjonen få en div med ID "sampleDiv" og tømme sine HTML innhold.

fungere clearDiv () {

Var getDiv = document.getElementById ( "sampleDiv");

Var emptyDiv = getDiv.innerHTML = "";

}

</ Script>

2 Lag div element med IDen "sampleDiv" innenfor body-kodene i dokumentet. Plasser en overskrift og avsnitt element innenfor det med noen eksempeltekst.

<H3> Prøve header her </ h3>

<P> Prøve avsnitt here.Sample avsnitt here.Sample avsnitt here.Sample avsnitt her. </ P>

</ Div>

3 Lag en knapp som brukeren kan klikke for å utløse Javascript-funksjonen kalles "clearDiv."

<-knappen Type = "button" class = "button" onclick = "clearDiv ()"> Clear Div </ knapp>

4 Legg styling til dine elementer, igjen i hodet kodene. Div vil være 200 piksler bred, 140 piksler dyp og har en rød bakgrunn for å gi den dimensjon for testformål.

sampleDiv {width: 200px; height: 150px; border: thin solid black; padding: 0 15px 0 16px; background-color: red; }

.button {margin: 20px 0 0 0; position: relative; float: left}

</ Style>

5 Lagre siden din og åpne den i en nettleser. Klikk på knappen. Innholdet i div skal forsvinne.

Bytt Div innhold

6 Legg en Javascript-funksjon kalt "replaceDiv" mellom hodet tagger i forrige koden. Har funksjonen får div med ID "sampleDiv" og erstatte HTML innholdet med nytt innhold.

fungere replaceDiv () {

Var getDiv = document.getElementById ( "sampleDiv");

Var emptyDiv = getDiv.innerHTML = ".. <h3> Utskifting header </ h3> <p> Dette er den nye teksten Dette er den nye teksten Dette er den nye teksten </ p>.";

}

7 Legg en annen knapp mellom body-kodene som utløser den nye funksjonen:

<-knappen Type = "button" class = "button" onclick = "replaceDiv ()"> Erstatt Div innholdet </ knapp>

8 Lagre siden din og åpne den i en nettleser. Trykk den nye knappen. Innholdet i div bør byttes ut.

Hele koden skal se slik ut:

<Html>

<Head>

sampleDiv {width: 200px; height: 150px; border: thin solid black; margin: 10px 0; padding: 0 15px 0 16px; background-color: red; }

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

</ Style>

fungere clearDiv () {

Var getDiv = document.getElementById ( "sampleDiv");

Var emptyDiv = getDiv.innerHTML = "";

}

fungere replaceDiv () {

Var getDiv = document.getElementById ( "sampleDiv");

Var emptyDiv = getDiv.innerHTML = ".. <h3> Utskifting header </ h3> <p> Dette er den nye teksten Dette er den nye teksten Dette er den nye teksten </ p>.";

}

</ Script>

</ Head>

<Body>

<H3> Prøve header her </ h3>

<P> Prøve avsnitt here.Sample avsnitt here.Sample avsnitt here.Sample avsnitt her. </ P>

</ Div>

<-knappen Type = "button" class = "button" onclick = "replaceDiv ()"> Erstatt Div innholdet </ knapp>

<-knappen Type = "button" class = "button" onclick = "clearDiv ()"> Clear Div innholdet </ knapp>

</ Body>

</ Html>