¿ La pantalla de coordenadas de un elemento se especifican en su declaración de estilo y almacenados por el navegador en el Document Object Model (DOM ) de la página HTML que se muestra . Cada elemento en el DOM se da una cadena de identidad ( ID ) . Un código JavaScript puede acceder a un elemento en particular con esta cadena de identidad como referencia y puede obtener los valores particulares de las coordenadas 'top' de los elementos dentro de la ventana del navegador de "izquierda" y . Cosas que necesitará
texto editor de la búsqueda Web navegador
Mostrar más instrucciones
1
Abra un nuevo archivo en el editor de texto y guárdelo como " coordinates.HTML . " Escribe o copia este código de declaración documento HTML en el archivo:
< DOCTYPE HTML PUBLIC " - //W3C //DTD XHTML 1.0 Strict //EN"
"http://! www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
Página 2
Escribir o copiar este código HTML head en el archivo:
Element
Coordenadas < /title> . <br> <p> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <br> <p> < style type = "text /css" > <br> <p> # cuadro <br> <p> <br> <p> { position: absolute ; <br> <p> z -index: 1 ; <br> visibilidad <p> : visible; <br> ancho <p> : 10.0em ; <br> altura <p> : 5.0em ; <br> <p> top: 1.0em ; <br> <p> izquierda : 1.0em ; <br> <p> frontera : 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> GetCoordinates <p> función ( ) { <br> <p> <br> <p> x = Math.floor ( Math.random () * 40 ) ; <br> <p> y = Math.floor ( Math.random () * 30 ) . <br> <p> document.getElementById ( "caja" ) style.left = x + " em" ; <br> <p> document.getElementById ( "caja" ) style.top = y + " em" , . . <br> <p> x = document.getElementById ( "caja" ) style.left ; <br> < . p> y = document.getElementById ( "caja" ) style.top ; <br> alerta <p> ( "left = " + x); <br> alerta <p> ( "top = " + y); <br> <p> <br> <p> } < /script > <br> <p> < /head> <br> 3 <p> Escribir o copiar este código HTML <body> código en el archivo : <br> <p> <body> <br> <p> <div id="box" onmouseover="getCoordinates()"> <br> <p> <br> <p> me toques ! <br> <p> < /p > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html> ; <br> 4 <p> Guarde el archivo y abrirlo en el navegador web. Toque el elemento y se moverá a una nueva posición dentro de la ventana del navegador y mostrar los valores de las coordenadas ' izquierda ' y ' top' . <br> <br>
<div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-un-PHP-a-un-JS-.html' >Cómo cambiar un PHP a un JS </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-girar-el-texto-con-javascript-.html' >Cómo girar el texto con javascript </a> </div>
</div>
<dl class=xgc>
<dt><span>JavaScript Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-girar-el-texto-con-javascript-.html">Cómo girar el texto con javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Diferencia-entre-onbeforeunload-y-OnUnload-.html">Diferencia entre onbeforeunload y OnUnload </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-controles-a-la-API-de-Google-Maps-.html">Cómo agregar controles a la API de Google Maps </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-deshabilitar-ActiveSync-Microsoft-.html">Cómo deshabilitar ActiveSync Microsoft </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-establecer-el-valor-de-un-iFrame-.html">Cómo establecer el valor de un iFrame </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Definición-de-variable-existe-en-JavaScript-.html">Definición de variable existe en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-invertir-Valor-booleano-en-JavaScript-.html">Cómo invertir Valor booleano en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-texto-basado-Browser-Games-.html">Cómo crear texto basado Browser Games </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Información-sobre-la-programación-del-Palm-OS-.html" >Información sobre la programación del Palm OS </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-habilitar-ASP-en-IIS-6-.html" >Cómo habilitar ASP en IIS 6 </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-Javascript-UTC-Fecha-de-hora-del-Este-.html" >Cómo convertir Javascript UTC Fecha de hora del Este </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-prevenir-Copy---Paste-.html" >Cómo prevenir Copy & Paste </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-actualizar-las-variables-de-sesión-de-JavaScript-.html" >Cómo actualizar las variables de sesión de JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-Javascript-con-Excel-.html" >Cómo utilizar Javascript con Excel </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-habilitar-el-servidor-de-control-de-uso-de-Javascript-.html" >Cómo habilitar el servidor de control de uso de Javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-las-compensaciones-de-desplazamiento-en-JavaScript-.html" >Cómo obtener las compensaciones de desplazamiento en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-onSubmit-.html" >Cómo cambiar onSubmit </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Códigos-de-PHP-en-JavaScript-Sintaxis-.html" >Códigos de PHP en JavaScript Sintaxis </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-OS-Grid-para-GPS-.html" >Cómo convertir OS Grid para GPS </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-instalar-un-selector-de-fecha-jQuery-.html" >Cómo instalar un selector de fecha jQuery </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html> 