A div er et objekt innenfor Document Object Model ( DOM ) på siden som vises i nettleservinduet . Den har en unik identifikator ( id ) streng. Det er en blokk beholder for andre gjenstander , og kan være skjult eller synlig . Det kan også bli flyttet til en posisjon i nettleseren displayet . Div objektet har et sett med velgere i forbindelse med sin id streng og egenskapene til disse velgere kan endres ved hjelp av java - script kode . Du trenger:
tekst editor.
Nettleser.
Vis flere instruksjoner
en
Åpne et nytt dokument i teksteditoren . Lagre filen som " use_id.html . "
2
Skriv dokument header koden
< 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 " >
Bruk DIV Med JavaScript < /title > <br> <p> < meta content = "text /html ; charset = utf- 8" . http - equiv = " Content - Type" /> <br> 3 <p> Skriv dokument stil kode <br> <p> < stil type = "text /css " > <br> <p> # myDiv <br> <p> { <br> <p> posisjon: absolutt; <br> <p> z-index : 0 ; <br> < p> visibility: visible ; <br> <p> topp: 10em ; <br> <p> venstre: 10em ; <br> <p> bredde : 10em ; <br> <p> høyde: 5em ; <br> < p> kant: 2px solid # ccc ; <br> <p> - moz - border- radius: 0.5em ; <br> <p> - webkit - border- radius: 0.5em ; <br> <p> text-align : center ; <br> <p> } <br> <p> # msg <br> <p> { <br> <p> color: white ; <br> <p> bakgrunn: grønn <br> <p> } <br> <p> < /style > <br> 4 <p> Skriv dokument JavaScript -kode. <br> <p> <script type="text/javascript"> <br> < p > var x ; <br> <p> Var y ; <br> <p> funksjon pause ( ms ) <br> <p> { <br> <p> Var date = new Date (); <br> < p > var CURDATE = null; <br> <p> trenger { CURDATE = new Date () ;} <br> <p> while ( CURDATE -date < ms ) ; <br> <p> } <br> < p > funksjon moveDiv ( ) <br> <p> { <br> <p> x = Math.floor ( Math.random ( ) * 40 ) ; <br> <p> y = Math.floor ( Math.random ( ) * 30 ) ; <br> <p> if ( document.all ) { <br> <p> document.getElementById ( " msg" ) innerText = "Hi gjøre det igjen! "; . . //Alle nettlesere <br> <p> } else { <br> <p> document.getElementById ( "msg ") textContent = " Hi gjøre det igjen! "; . . //Firefox <br> <p> } <br> <p> pause ( 500 ) ; <br> <p> document.getElementById ( " myDiv ") style.top = y + " em "; . . <br> <p> document.getElementById ( " myDiv ") style.left = x + " em "; . <br> <p> } <br> <p> < /script > <br> <p> < /head> <br> 5 <p> Skriv dokument kroppen kode <br> <p> <body> <br> <p> <div id="myDiv" onmouseover = "moveDiv()"/> <br> <p> <p id="msg"> <br> <p> Touch Me ! <br> <p> < /p > <br> <p> < /div > <br> <p> < /body > <br> <p> < /html > <br> 6 <p> Åpne fil i nettleseren . Flytt musepekeren over div området , og det vil flytte til en ny stilling i nettleseren displayet og vise en ny melding . , <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="745" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f4">
<tr>
<td bgcolor="#ecf0f4"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="95%" align="center" height="26">
<tr>
<td width="51%"><p>früher ： <a class='LinkPrevArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90983.html' >Hvordan skjule alle åpne DIVs i JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> Weiter： <a class='LinkNextArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90985.html' >Hvordan Roter Links i JavaScript </a></li></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" height=7>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=770 align=center height=246>
<tr>
<td height=246 vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><strong>Relatert Artike</strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90989.html" title="Hvordan få et attributt i JavaScript " target="_self">Hvordan få et attributt i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91234.html" title="Hvordan lage elementer med JavaScript Client Side " target="_self">Hvordan lage elementer med JavaScript Client Side </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91132.html" title="Hvordan slå på JavaScript i Dell 1501 Inspirion " target="_self">Hvordan slå på JavaScript i Dell 1501 Inspirion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91277.html" title="Hvordan bruke HREF JavaScript Lenker " target="_self">Hvordan bruke HREF JavaScript Lenker </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91119.html" title="Hvordan deaktivere Print Screen JavaScript " target="_self">Hvordan deaktivere Print Screen JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91224.html" title="Hvordan konfigurere Apache for Javascript " target="_self">Hvordan konfigurere Apache for Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90802.html" title="Hvordan bruke Google Maps API til Auto Complete stedsfelt " target="_self">Hvordan bruke Google Maps API til Auto Complete stedsfe…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90782.html" title="Kombinasjon av JavaScript Hurtigtaster " target="_self">Kombinasjon av JavaScript Hurtigtaster </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90781.html" title="Et nytt vindu er blokkert i JavaScript " target="_self">Et nytt vindu er blokkert i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91275.html" title="Hvordan finne en Prime Number Bruke Javascript " target="_self">Hvordan finne en Prime Number Bruke Javascript </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=20></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><strong>Anbefalte artikler </strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95673.html" title="Hva er Visual Basic terminologier " target="_self">Hva er Visual Basic terminologier </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/cc-programming/86209.html" title="Hvordan Declare Statiske funksjoner i C + + " target="_self">Hvordan Declare Statiske funksjoner i C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/90604.html" title="Java 5 Vs . Java 6 " target="_self">Java 5 Vs . Java 6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95460.html" title="Slik konverterer datoer for å Militære Datoer i Access 2007 VBA " target="_self">Slik konverterer datoer for å Militære Datoer i Acces…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/89828.html" title="Hvordan analysere en kommaseparert streng til variabler i Java " target="_self">Hvordan analysere en kommaseparert streng til variabler…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/94397.html" title="Hvordan beregne Block Size for VB datasett " target="_self">Hvordan beregne Block Size for VB datasett </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95761.html" title="Hvordan få tilgang til VBA- datatyper " target="_self">Hvordan få tilgang til VBA- datatyper </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/88730.html" title="Typer data " target="_self">Typer data </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91126.html" title="Hvordan Block IE6 " target="_self">Hvordan Block IE6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/python-programming/93461.html" title="Python Load Funksjoner " target="_self">Python Load Funksjoner </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 height=8>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=center>Copyright © Datamaskin http://www.datamaskin.biz/
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> 