Een div is een object binnen het Document Object Model ( DOM ) van de pagina weergegeven in het venster van uw webbrowser . Het heeft een unieke identificatie ( id ) string. Het is een blok container voor andere doeleinden en kunnen verborgen of zichtbaar zijn . Het kan ook worden verplaatst naar de geselecteerde positie binnen het weergavegebied browser . De div object heeft een set van selecteurs in verband met haar id string en de eigenschappen van deze selectors kunnen worden gewijzigd met behulp van Java - script code . Wat je nodig hebt
tekst editor .
Webbrowser .
Toon Meer Aanwijzingen
1 Open een nieuw document in de tekstverwerker . Sla het bestand op als " use_id.html . "
Schrijf documentkoptekst code 2
< DOCTYPE html PUBLIC " - . ! //W3C //DTD XHTML 1.0 Strict //" >
< html xmlns = " http://www NL "
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd .w3.org/1999/xhtml " >
Gebruik DIV Met JavaScript < /title > <p> < meta inhoud <br> = " text /html ; charset = uTF - 8 " . http - equiv = " Content-Type " /> <br> <p> Schrijf document stijl code 3 <br> <p> < style type = " text /css " > <br> <p> # myDiv <br> <p> { <p> positie <br> : absolute ; <p> z - index <br> : 0 ; <br> <p > zichtbaarheid : zichtbaar ; <br> <p> top : 10em ; <br> <p> left: 10em ; <p> breedte <br> : 10em ; <p> hoogte <br> : 5em ; <br> <p > border : 2px solid # ccc ; <br> <p> - moz - border - radius : 0.5em ; <br> <p> - webkit - border - radius : 0.5em ; <p> <br> text -align : center ; <br> <p> } # msg <br> <p> { <p> kleur <br> <p> <br> : wit; <p> achtergrond | : groene <br> <p> } <br> <p> < /style > <br> <p> Schrijf document JavaScript-code 4 . <br> <p> <script type="text/javascript"> <br> <p > var x ; <p> var y <br> ; <p> pauzefunctie <br> ( ms ) op <p> { <p> var datum <br> = new date ( ) ; <br> <p > var CURDATE = null ; <br> <p> doen { CURDATE = new date ( ) ; } <br> <p> terwijl ( CURDATE - date < ms ) ; <p> } <br> <p > functie moveDiv ( ) op <p> { <br> <p> x = Math.floor ( Math.random ( ) * 40 ) ; <br> <p> y = Math.floor ( Math.random ( ) * 30 ) ; <br> <p> if ( document.all ) { document.getElementById <p> <br> ( " msg " ) innerText = "Hallo het opnieuw doen ! " ; . . //Alle browsers <br> <p> } else { document.getElementById <p> <br> ( " msg " ) textContent = "Hallo het opnieuw doen ! " ; . . //Firefox <p> } <p> pauze ( <br> 500 ) ; <p> document.getElementById <br> ( " myDiv " ) style.top = y + " em " ; . . <p> document.getElementById <br> ( " myDiv " ) style.left = x + " em " ; . <br> <p> } <br> <p> < /script > <br> <p> < /head > <br> <p> Schrijf document lichaam code 5 <br> <p> <body> <p> <div id="myDiv" onmouseover <br> = "moveDiv()"/> <br> <p> <p id="msg"> <br> <p> Touch Me ! <br> <p> < /p> <p> < /div > <p> < /body > <br> <p> < /html > <br> 6 <p> Open dit bestand in de webbrowser . Beweeg de muisaanwijzer over de div gebied , en het zal verplaatsen naar een nieuwe positie binnen de browser weergavegebied en weer een nieuw bericht . , <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/90983.html' >Hoe je alle van de Open DIV's in JavaScript verbergen </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/90985.html' >Hoe je links in JavaScript </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91016.html" title="Hoe te Disable CSS Hover Met JavaScript " target="_self">Hoe te Disable CSS Hover Met J…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91222.html" title="Hoe kan ik een afbeelding zoeken op een website te maken " target="_self">Hoe kan ik een afbeelding zoek…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90827.html" title="Hoe te langzaam Trace in JavaScript " target="_self">Hoe te langzaam Trace in JavaS…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90979.html" title="Hoe om te bepalen of een site maakt gebruik van JavaScript Omleidingen " target="_self">Hoe om te bepalen of een site …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91193.html" title="Hoe een Combobox met JavaScript Fill " target="_self">Hoe een Combobox met JavaScrip…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91160.html" title="Hoe maak je een Habbo Retro Make " target="_self">Hoe maak je een Habbo Retro Ma…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91108.html" title="Hoe je tekst Wijzig op een Rollover " target="_self">Hoe je tekst Wijzig op een Rol…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90921.html" title="Code voor Verwijzen naar een JS -bestand " target="_self">Code voor Verwijzen naar een J…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90867.html" title="Hoe te Voorwaardelijke Verklaringen Doe in een JS -bestand " target="_self">Hoe te Voorwaardelijke Verklar…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<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>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<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>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/96383.html" title="Hoe maak je een VBS script schrijven om een bestand te openen " target="_self">Hoe maak je een VBS script schrijven om …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92291.html" title="Hoe te schrijven aan een externe bestanden in PHP " target="_self">Hoe te schrijven aan een externe bestand…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/perl-programming/201309/93205.html" title="Hoe je netto Twitter PERL Gebruik " target="_self">Hoe je netto Twitter PERL Gebruik </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/91507.html" title="Hoe je WAMP configureren met Eclipse IDE voor PHP " target="_self">Hoe je WAMP configureren met Eclipse IDE…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/python-programming/201309/94005.html" title="Hoe te Plein Elementen in een lijst in Python " target="_self">Hoe te Plein Elementen in een lijst in P…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/91614.html" title="Is_array Vs . Is_string in PHP " target="_self">Is_array Vs . Is_string in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90808.html" title="Hoe te MooTools Droppables Controleer Tegen Prestatie " target="_self">Hoe te MooTools Droppables Controleer Te…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94327.html" title="Wat is een VB- script gebruikt? " target="_self">Wat is een VB- script gebruikt? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89363.html" title="Hoe te berekenen Coding voor Java Boxes " target="_self">Hoe te berekenen Coding voor Java Boxes </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
| 