August 24
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.
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.,