Ta reda på koordinaterna för ett element i JavaScript

? Skärmen koordinaterna för ett element specificeras i sin stil uttalande och lagras av webbläsaren i Document Object Model ( DOM ) för den visade HTML- sidan . Varje element inom DOM ges en identitet sträng ( id ) . En JavaScript -kod kan komma åt ett visst element med denna identitet sträng som referens och kan erhålla särskilda värden för "vänster" och " top " koordinaterna av elementen i webbläsarfönstret . Saker du behöver
Textredigerare
webbläsare
Visa fler instruktioner
1

Öppna en ny fil i textredigeraren och spara den som " coordinates.HTML . " Skriv eller kopiera denna HTML-kod dokumentdeklarationen i filen :

< DOCTYPE html PUBLIC " - //W3C //DTD XHTML 1.0 Strict //EN "

" http://! www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >

Sida 2

Skriv eller kopiera denna HTML kod i filen :

elementkoordinater < /title > . <br> <p> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <br> <p> < style type = " text /css " > <br> <p> # box <br> <p> { <br> <p> position: absolute ; <br> <p> z - index : 1 ; <br> <p> synlighet : synlig ; <br > <p> width : 10.0em ; <br> <p> höjd : 5.0em ; <br> <p> top : 1.0em ; <br> <p> vänster : 1.0em ; <br> <p> gränsen : 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> funktion getCoordinates ( ) katalog <p> { <br> <p> x = Math.floor ( Math.random ( ) * 40 ) , <br> <p> y = Math.floor ( Math.random ( ) * 30 ) , . <br> <p> document.getElementById ( " box " ) style.left = x + " em " ; <br> <p> document.getElementById ( " box " ) style.top = y + " em " , . . <br> <p> x = document.getElementById ( " box " ) style.left ; <br> < . p > y = document.getElementById ( " box " ) style.top ; <br> <p> alert ( " vänster = " + x ) ; <br> <p> alert ( " top = " + y ) ; <br > <p> } <br> <p> < /script > <br> <p> < /head > Addera 3 <p> Skriv eller kopiera denna HTML <body> kod i filen : <br> <p> <body> <br> <p> <div id="box" onmouseover="getCoordinates()"> <br> <p> <p> <br > <p> Rör mig ! <br> </p > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > ; <br> 4 <p> Spara filen och öppna den i webbläsaren . Peka på elementet och det kommer att flytta till en ny plats i webbläsarfönstret och visa " vänster " och " top " koordinatvärden . <br> <br> <div class=dad2><script language='javascript' src='http://www.dator.xyz/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='http://www.dator.xyz/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90935.html' >Hur du ändrar ett PHP till en JS </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90937.html' >Hur Rotera text med JavaScript </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <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.dator.xyz/Programmering/javascript-programming/91253.html" title="Hur man byter ignoreCase " target="_self">Hur man byter ignoreCase </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91083.html" title="Hur du korrigerar Skriptfel " target="_self">Hur du korrigerar Skriptfel </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91060.html" title="Hur man tar bort en P Tag med jQuery " target="_self">Hur man tar bort en P Tag med jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90967.html" title="Hur Explode en sträng med JavaScript " target="_self">Hur Explode en sträng med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90820.html" title="Ta reda på om ett nummer passar in i ett Int i JavaScript " target="_self">Ta reda på om ett nummer passar in i ett Int i JavaScr…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91195.html" title="Hur man använder Java Script i Flash 8 " target="_self">Hur man använder Java Script i Flash 8 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91001.html" title="Hur man lägger in en Facebook Connect i sidfoten Använda JavaScript " target="_self">Hur man lägger in en Facebook Connect i sidfoten Anvä…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91069.html" title="Hur man använder JavaScript för att uppdatera en sida Titel " target="_self">Hur man använder JavaScript för att uppdatera en sida…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91258.html" title="Hur man använder Rullande text i Javascript " target="_self">Hur man använder Rullande text i Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91245.html" title="Ljuslåda Tutorial " target="_self">Ljuslåda Tutorial </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"> <table class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <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.dator.xyz/Programmering/javascript-programming/90865.html" title="Så här aktiverar du ASP.NET validerare Med JavaScript " target="_self">Så här aktiverar du ASP.NET validerare Med JavaScript…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86700.html" title="Begreppen MATLAB " target="_self">Begreppen MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88944.html" title="Hur du ändrar egenskaper i en CSS- mall " target="_self">Hur du ändrar egenskaper i en CSS- mall </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95808.html" title="Hur man lär FoxPro Online " target="_self">Hur man lär FoxPro Online </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85631.html" title="Hur Flip ett nummer i Boolean " target="_self">Hur Flip ett nummer i Boolean </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/91420.html" title="Hur vill kolla Vilka jobb är planerade i Toad " target="_self">Hur vill kolla Vilka jobb är planerade i Toad </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92973.html" title="Hur skicka text och HTML- e-postmeddelanden i PHP " target="_self">Hur skicka text och HTML- e-postmeddelanden i PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/python-programming/93572.html" title="Hur Loop Through Alla fastigheter på ett Python Object " target="_self">Hur Loop Through Alla fastigheter på ett Python Object…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/86008.html" title="Hur man kompilerar DirectX Prover i Visual C " target="_self">Hur man kompilerar DirectX Prover i Visual C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95220.html" title="Lägga till en välkomstskärm till Visual Basic Project " target="_self">Lägga till en välkomstskärm till Visual Basic Projec…</a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>