Hvordan bruke DIV med Javascript

December 30

En div er et objekt innen Document Object Model (DOM) på siden som vises i nettleservinduet. Den har en unik identifikator (id) streng. Det er et blokk beholder for andre formål, og kan være skjult eller synlig. Det kan også bli flyttet til en posisjon i nettleseren visningsområdet. Div objekt har et sett med velgere i forbindelse med sin id streng og egenskapene til disse velgerne kan endres ved hjelp av java-script kode.

Bruksanvisning

1 Åpne et nytt dokument i tekstredigeringsprogrammet. Lagre filen som "use_id.html."

2 Skriv dokument header kode.

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<Head>

3 Skriv dokument stil kode.

myDiv

{

position: absolute;

z-index: 0;

synlighet: synlig;

top: 10em;

venstre: 10em;

width: 10em;

høyde: 5em;

border: 2px solid #ccc;

-moz-border-radius: 0.5em;

-webkit-border-radius: 0.5em;

text-align: center;

}

msg

{

Farge: hvit;

bakgrunn: grønn

}

</ Style>

4 Skriv dokument Javascript-kode.

var x;

Var y;

funksjon pause (ms)

{

Var date = new Date ();

Var curDate = null;

gjøre {curDate = new Date (); }

while (curDate-date <ms);

}

fungere moveDiv ()

{

x = Math.floor (Math.random () * 40);

y = Math.floor (Math.random () * 30);

if (document.all) {

document.getElementById("msg").innerText = "Hi! do it again"; // All browsers.

} Else {

document.getElementById("msg").textContent = "Hi! do it again"; // Firefox.

}

pause (500);

document.getElementById ( "myDiv") style.top = y + "em.";

. Document.getElementById ( "myDiv") style.left = x + "em";

}

</ Script>

</ Head>

5 Skriv dokument kroppen kode.

<Body>

Ta på meg!

</ P>

</ Div>

</ Body>

</ Html>

6 Åpne denne filen i nettleseren. Flytt musepekeren over div området, og det vil flytte til en ny posisjon i nettleseren visningsområdet og vise en ny melding.,