Het scherm coördinaten van een element worden gespecificeerd in zijn verklaring stijl en opgeslagen door de browser binnen het Document Object Model ( DOM ) van de weergegeven HTML-pagina . Elk element in de DOM wordt gegeven een identiteit string ( id ) . Een JavaScript-code toegang tot een bepaald element met dit identiteitsstring als referentie en kunnen de specifieke waarden voor de 'links' en 'top' coördinaten van de elementen binnen het browservenster te verkrijgen . Wat je nodig hebt
tekst editor
webbrowser
Toon Meer Aanwijzingen
1 Open een nieuw bestand in de teksteditor en sla het op als " coordinates.HTML . " Schrijf of kopieer deze HTML -document verklaring code in het bestand :
< DOCTYPE HTML PUBLIC " - //W3C //DTD XHTML 1.0 Strict //EN " " http://
! www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< br > Pagina 2 Schrijf of kopieer deze HTML code in het bestand : Element <br> Coördinaten < /title > . <br> <p> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <br> <p> < stijl type = " text /css " > <br> <p> # box <p> { <p> positie <br> : absolute ; <p> z - index <br> : 1 ; <p> zichtbaarheid <br> : zichtbaar ; < br <p> breedte > : 10.0em ; <p> hoogte <br> : 5.0em ; <p> <br> top : 1.0em ; <p> links <br> : 1.0em ; <p> grens <br> : 2px solid # ccc ; <br> <p> - moz - border - radius : 0.5em ; <p> - webkit - border - radius <br> : 0.5em ; <br> <p> text-align : center ; <p> padding <br> : 1.0em ; <br> <p> } <p> p { <p> font-size <br> : 1.2em ; <p> font-weight <br> : 900 ; <p> kleur <br> : # 000000 ; } <p> <br> <p> <br> < /style > <br> <p> <script type="text/javascript"> < br > <p> var x ; <p> var y <br> ; <p> functie getCoordinates <br> ( ) <p> { <br> <p> <br> x = Math.floor ( Math.random ( ) * 40 ) ; <br> <p> y = Math.floor ( Math.random ( ) * 30 ) ; . <p> document.getElementById <br> ( "box" ) style.left = x + " em " ; <p> document.getElementById <br> ( "box" ) style.top = y + " em " ; . . <br> <p> x = document.getElementById ( "box" ) style.left ; <br> < . p > y = document.getElementById ( "box" ) style.top ; <p> alert <br> ( " links = " + x ) ; <p> alert <br> ( "top = " + y ) ; < br <p> } <br> <p> > < /script > <br> <p> < /head > <br> 3 <p> Schrijf of kopieer deze HTML <body> code in het bestand : <p> <body> <br> <p> <br> <div id="box" <p> <p> <br> < br onmouseover="getCoordinates()"> > <p> Touch me ! <br> <p> < /p> <p> < /div <br> <p> < /html > <p> < Twitter /body > > ; <br> 4 <p> Sla het bestand op en open het in de webbrowser . Raak het element en het zal verplaatsen naar een nieuwe positie binnen het browservenster en geef de 'links' en 'top' waarden van de coördinaten . <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/90935.html' >Hoe maak je een PHP wijzigen naar een JS </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/90937.html' >Hoe je tekst roteren Met 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/91153.html" title="Hoe je Javascript gebruiken Met Flash " target="_self">Hoe je Javascript gebruiken Me…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90937.html" title="Hoe je tekst roteren Met JavaScript " target="_self">Hoe je tekst roteren Met JavaS…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91158.html" title="Hoe PDF Met Maken Javascript " target="_self">Hoe PDF Met Maken Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91048.html" title="How To tekstvakken inschakelen en uitschakelen in Javascript " target="_self">How To tekstvakken inschakelen…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91099.html" title="Hoe te praten met een NTP- server met behulp van JavaScript " target="_self">Hoe te praten met een NTP- ser…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90832.html" title="Hoe te ColdFusion-objecten converteren naar JSON " target="_self">Hoe te ColdFusion-objecten con…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90755.html" title="Hoe maak je een boom met behulp van een doek in JavaScript " target="_self">Hoe maak je een boom met behul…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90870.html" title="Hoe te CrawlTrack invoegen Into WordPress " target="_self">Hoe te CrawlTrack invoegen Int…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90946.html" title="Zo plaatst u een DIV Into Another DIV Dynamisch " target="_self">Zo plaatst u een DIV Into Anot…</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/95142.html" title="Hoe om te doen plein Roots in Vb.Net " target="_self">Hoe om te doen plein Roots in Vb.Net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95404.html" title="Hoe kan ik een kolom Totaal in DataGrid " target="_self">Hoe kan ik een kolom Totaal in DataGrid </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89430.html" title="Hoe maak je een Android Emulator Maak " target="_self">Hoe maak je een Android Emulator Maak </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88355.html" title="Hoe maak je een Windows Mobile Emulator installeren " target="_self">Hoe maak je een Windows Mobile Emulator …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/96235.html" title="Hoe te Telnet Start Van Visual Basic " target="_self">Hoe te Telnet Start Van Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89147.html" title="Hoe maak je een Delay Effect Neem Java Eclipse " target="_self">Hoe maak je een Delay Effect Neem Java E…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/90236.html" title="Wat zijn de grote verschillen tussen Java 1.4 & 1.5 " target="_self">Wat zijn de grote verschillen tussen Jav…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/python-programming/201309/94052.html" title="Hoe te transponeren een lijst van lijsten in Python " target="_self">Hoe te transponeren een lijst van lijste…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95496.html" title="XML codering & ASP " target="_self">XML codering & ASP </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>
| 