? Skjermen koordinatene til et element er spesifisert i sin stil erklæringen og lagret av nettleseren innenfor Document Object Model ( DOM ) av den viste HTML-side . Hvert element i DOM gis en identitet streng ( id ) . En JavaScript-kode kan få tilgang til et bestemt element med denne identiteten streng som en referanse og kan få tak i de spesielle verdiene for ' venstre ' og ' top' koordinatene til elementer i nettleservinduet. Du trenger
tekst editor
nettleser
Vis flere instruksjoner
en
Åpne en ny fil i tekst editor og lagre det som " coordinates.HTML . " Skriv eller kopier denne HTML-dokument erklæringen kode inn i filen : en
< DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Strict //EN "
"http://! www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
2
Skriv eller kopiere denne HTML
kode inn i filen : en
Element Koordinater < /title> . <br> <p> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <br> <p> < style type = "text /css " > <br> <p> # boks <br> <p> { <br> <p> posisjon: absolutt; <br> <p> z-index : 1 ; <br> <p> visibility: visible ; <br> <p> bredde : 10.0em ; <br> <p> høyde: 5.0em ; <br> <p> topp: 1.0em ; <br> <p> venstre: 1.0em ; <br> <p> grensen : 2px solid # ccc ; <br> <p> - moz - border- radius: 0.5em ; <br> <p> - webkit - border- radius: 0.5em ; <br> <p> text-align : center ; <br> <p> padding: 1.0em ; <br> <p> } <br> <p> p { <br> <p> font-size : 1.2em ; <br> <p> font-weight : 900 ; <br> <p> color: # 000000 ; <br> <p> } <br> <p> < /style > <br> <p> <script type="text/javascript"> <br > <p> Var x ; <br> <p> Var y ; <br> <p> funksjon getCoordinates ( ) <br> <p> { <br> <p> x = Math.floor ( Math.random ( ) * 40 ) ; <br> <p> y = Math.floor ( Math.random ( ) * 30 ); . <br> <p> document.getElementById ( "boks" ) style.left = x + " em "; <br> <p> document.getElementById ( "boks" ) style.top = y + " em "; . . <br> <p> x = document.getElementById ( "boks" ) style.left ; <br> < . p> y = document.getElementById ( "boks" ) style.top ; <br> <p> alert (" venstre = " + x ) ; <br> <p> alert ( "top = " + y) ; <br> <p> } <br> <p> < /script > <br> <p> < /head> <br> 3 <p> Skriv eller kopiere denne HTML <body> kode inn i filen : en <p> <body> <br> <p> <div id="box" onmouseover="getCoordinates()"> <br> <p> <p> <br > <p> Ta på meg ! <br> <p> < /p > <br> <p> < /div > <br> <p> < /body > <br> <p> < /html > ; <br> 4 <p> Lagre filen og åpne den i nettleseren. Trykk på elementet og det vil flytte til en ny posisjon i nettleservinduet og vise ' venstre ' og ' top' koordinatverdier . <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/90935.html' >Hvordan endre en PHP til en JS </a></li></p></td>
</tr>
<tr>
<td width="49%"> Weiter： <a class='LinkNextArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90937.html' >Hvordan Roter tekst med 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/91129.html" title="Hvordan beregne i Java Script " target="_self">Hvordan beregne i Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91278.html" title="Hvordan bruke en Array Class i Javascript " target="_self">Hvordan bruke en Array Class 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/90833.html" title="Hvordan koden ved hjelp av Script Editor i LiveCycle " target="_self">Hvordan koden ved hjelp av Script Editor i LiveCycle </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90807.html" title="Hvordan lage en Bouncing Ball animasjon i HTML " target="_self">Hvordan lage en Bouncing Ball animasjon i HTML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90811.html" title="Hvordan Draw Curves Med Javascript " target="_self">Hvordan Draw Curves Med Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90934.html" title="Slik fjerner iFrame Scrollbars i JavaScript " target="_self">Slik fjerner iFrame Scrollbars 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/90790.html" title="Hva er en AXD Fil " target="_self">Hva er en AXD Fil </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90784.html" title="Tutorial på jQuery og Google Maps " target="_self">Tutorial på jQuery og Google Maps </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90894.html" title="Slik Clear en drop-down i jQuery " target="_self">Slik Clear en drop-down i jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91075.html" title="Hvordan kjøre en ekstern Java Script Når en HTML-side Masse " target="_self">Hvordan kjøre en ekstern Java Script Når en HTML-side…</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/python-programming/93708.html" title="Hvordan kode Whois Oppslag i Python " target="_self">Hvordan kode Whois Oppslag i Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95404.html" title="Hvordan beregne en kolonne Total i DataGrid " target="_self">Hvordan beregne en kolonne Total i DataGrid </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95108.html" title="Hvordan skrive en Tangent kode for en kalkulator i VB.Net " target="_self">Hvordan skrive en Tangent kode for en kalkulator i VB.N…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/92304.html" title="Hvordan erstatte Array Strings i PHP " target="_self">Hvordan erstatte Array Strings i PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/92872.html" title="Slik konverterer en PHP Timestamp til et Dato " target="_self">Slik konverterer en PHP Timestamp til et Dato </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/python-programming/93693.html" title="Hvordan legge til en variabel til seg selv i Python " target="_self">Hvordan legge til en variabel til seg selv i Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/88984.html" title="Mega Prosjekter i Java " target="_self">Mega Prosjekter i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/93144.html" title="Hvordan installere PHP Engine på en Windows-PC " target="_self">Hvordan installere PHP Engine på en Windows-PC </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91057.html" title="Hvordan beregne Array Lengde på Javascript " target="_self">Hvordan beregne Array Lengde på Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/91581.html" title="Hvordan kode PHP og MySQL til å velge staten " target="_self">Hvordan kode PHP og MySQL til å velge staten </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> 