Come usare DIV con JavaScript

August 24

Come usare DIV con JavaScript


Un div è un oggetto all'interno del Document Object Model (DOM) della pagina visualizzata nella finestra del browser web. Ha una stringa di identificazione univoco (id). È un contenitore blocco per altri oggetti e può essere nascosto o visibile. Può anche essere spostato in posizione selezionata all'interno dell'area di visualizzazione del browser. L'oggetto div ha una serie di selettori connessi alla sua string id e le proprietà di questi selettori possono essere modificati utilizzando il codice Java-script.

istruzione

1 Aprire un nuovo documento nell'editor di testo. Salvare il file come "use_id.html."

2 Scrivere il codice intestazione del documento.

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

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

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<Title> Usa DIV con JavaScript </ title>

<Contenuto meta = "text / html; charset = utf-8" http-equiv = "Content-Type" />

3 Scrivere il codice stile del documento.

<Style type = "text / css">

myDiv

{

position: absolute;

z-index: 0;

Visibilità: visibile;

top: 10em;

sinistra: 10em;

width: 10em;

altezza: 5em;

border: 2px #ccc solido;

-moz-border-radius: 0.5em;

-webkit-border-radius: 0.5em;

text-align: center;

}

msg

{

colore bianco;

sfondo: verde

}

</ Style>

4 Scrivi documento codice JavaScript.

<Script type = "text / javascript">

var x;

var y;

funzione di pausa (ms)

{

Data var = new Date ();

var CURDATE = null;

do {CURDATE = new Date (); }

mentre (CURDATE aggiornato <ms);

}

funzione 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.

} altro{

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

}

pausa (500);

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

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

}

</ Script>

</ Head>

5 Scrivere il codice del corpo del documento.

<Body>

<Div id = "myDiv" onmouseover = "moveDiv ()" />

<P id = "msg">

Toccami!

</ P>

</ Div>

</ Body>

</ Html>

6 Aprire il file nel browser Web. Spostare il puntatore del mouse sopra la zona div, ed esso si sposterà in una nuova posizione all'interno dell'area di visualizzazione del browser e visualizzare un nuovo messaggio.,