A div es un objeto dentro del Document Object Model (DOM ) de la página que aparece en la ventana del navegador web. Tiene una cadena de identificador único (id ) . Se trata de un contenedor de bloques para otros objetos y puede estar oculto o visible . También se puede mover a la posición seleccionada dentro de la zona de visualización del navegador . El objeto div tiene un conjunto de selectores asociados a su cadena de identificación y las propiedades de estos selectores se pueden modificar mediante código java -script . Cosas que necesitará editor de Texto Fotos .
Navegador Web.
Ver Más instrucciones
1
Abrir un nuevo documento en el editor de texto. Guarde el archivo como " use_id.html . "
2
Escribir código de documento encabezado
< DOCTYPE HTML PUBLIC " - . ! //W3C //DTD XHTML 1.0 Strict //EN "
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
< HTML xmlns = " http://www .w3.org/1999/xhtml ">
Utilice DIV con JavaScript < /title > <br> <p> < meta content = "text /html ; charset = utf - 8 ." http -equiv = "Content- Type" /> <br> 3 <p> Escribir código de estilo documento <br> <p> <style type = "text /css" > <br> <p> # myDiv <br> <p> <br> <p> { position: absolute ; <br> <p> z -index: 0 ; <br> < p> visibility: visible ; <br> <p> top: 10em ; <br> <p> izquierda : 10em ; <br> ancho <p> : 10em ; <br> altura <p> : 5em ; <br> < p> fronteriza : 2px solid # ccc ; <br> <p> - moz- border-radius : 0.5em ; <br> <p> - webkit- border-radius : 0.5em ; <br> <p> text-align : center; <br> <p> } <br> <p> # msj <br> <p> { <br> <p> color: blanco; <br> <p> fondo : verde <br> <p> <br> <p> } < /style> <br> 4 <p> Write documento código JavaScript . <br> <p> <script type="text/javascript"> <br> < p > var x; <br> <p> var y; <br> <p> función de pausa (ms ) <br> <p> { <br> <p> var fecha = new Date (); <br> < p > var CURDATE = null; <br> <p> do { CURDATE = new Date (); } <br> <p> while ( CURDATE día < ms) ; <br> <p> } <br> < p > Función moveDiv () <br> <p> { <br> <p> x = Math.floor ( Math.random () * 40 ) ; <br> <p> y = Math.floor ( Math.random () * 30 ) ; <br> <p> if ( document.all ) { <br> <p> document.getElementById ( "msg ") innerText = " Hola hacerlo de nuevo! "; .. //Todos los navegadores <br> <p> } else { <br> <p> document.getElementById ( "msg ") textContent = " Hola hacerlo de nuevo! " , . . //Firefox <br> <p> } <br> <p> pausa ( 500 ) ; <br> <p> document.getElementById ( " myDiv ") style.top = y + " em" , . . <br> <p> document.getElementById ( " myDiv ") style.left = x + " em " ; . <br> <p> } <br> <p> < /script > <br> <p> < /head> <br> 5 <p> Escribir código del cuerpo del documento <br> <p> <body> <br> <p> <div id="myDiv" onmouseover = "moveDiv()"/> <br> <p> <p id="msg"> <br> <p> Touch Me ! <br> <p> < /p > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html> <br> 6 <p> Abrir archivo en el navegador web. Mueva el puntero del ratón sobre el área div , y se moverá a una nueva posición dentro de la zona de visualización del navegador y mostrar un mensaje nuevo. , <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-ocultar-los-DIVs-Open-in-JavaScript-.html' >Cómo ocultar los DIVs Open in JavaScript </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-girar-Enlaces-en-JavaScript-.html' >Cómo girar Enlaces en 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/Imprimir-Tutorial-de-JavaScript-.html">Imprimir Tutorial de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Instrucciones-de-Cómo-activar-JavaScript-.html">Instrucciones de Cómo activar JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-ocultar-un-redireccionamiento-.html">Cómo ocultar un redireccionamiento </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-Prototype-JS-.html">Cómo utilizar Prototype JS </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-una-galería-de-fotos-con-Siguiente-y-Anterior-Enlaces-y-Ampliación-de-imagen-Pop---Ups-.html">Cómo crear una galería de fotos con Siguiente y Anterior Enlaces y Ampliación de imagen Pop - Ups </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-comparar-String-de-Java-Script-.html">Cómo comparar String de Java Script </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/IE-8-no-válido-Error-JavaScript-Pointer-.html">IE 8 no válido Error JavaScript Pointer </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Tutorial-de-Javascript-efectos-de-fondo-.html">Tutorial de Javascript efectos de fondo </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/Javascript-Timer-Tutorial-.html" >Javascript Timer Tutorial </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-el-botón-Publicar-en-Facebook-a-su-sitio-web-.html" >Cómo agregar el botón Publicar en Facebook a su sitio web </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-recuperar-los-datos-de-una-base-de-datos-mediante-Java-Script-.html" >Cómo recuperar los datos de una base de datos mediante Java Script </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Javascript-Tutorial-para-PDF-.html" >Javascript Tutorial para PDF </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Efectos-secuenciales-en-jQuery-.html" >Efectos secuenciales en jQuery </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-configurar-Apache-para-Javascript-.html" >Cómo configurar Apache para Javascript </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-editar-secuencias-y-de-subcadenas-de-JavaScript-.html" >Cómo editar secuencias y de subcadenas de JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-una-Ticker-Javascript-.html" >Cómo crear una Ticker Javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Matriz-Javascript-Tutorial-.html" >Matriz Javascript Tutorial </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-comentar-en-un-Java-Script-.html" >Cómo comentar en un Java Script </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-dividir-una-cadena-en-JavaScript-.html" >Cómo dividir una cadena en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Código-para-hacer-referencia-a-un-archivo-JS-.html" >Código para hacer referencia a un archivo JS </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> 