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/90983.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/90985.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/91101.html">¿Por qué es Guión ralentizando mi PC de Down </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91249.html">Cómo hacer un curriculum vitae con el Programa de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91131.html">Cómo agregar Float con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90933.html">Cómo editar una carta en Acajoom </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90861.html">Cómo hacer un Slide Toggle abajo con jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90982.html">Cómo cambiar de menú Imágenes en mouseover en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/313009.html">¿Describe cómo JavaScript puede ser explotado por los atacantes? </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91168.html">Cómo eliminar una barra de direcciones en HTML </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/90805.html" >Cómo utilizar el código DBL </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90880.html" >JavaScript Función Redondeo </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/263219.html" >¿Cómo solucionar el bloqueo de renderizado de JavaScript y CSS en WordPress? </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90807.html" >Cómo hacer una pelota que rebota Animación información </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91039.html" >Cómo dividir cadenas en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91094.html" >Cómo convertir OS Grid para GPS </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/90772.html" >Javascript y expresiones regulares para Códigos postales </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90992.html" >Cómo hacer un DIV Visible con un desplazamiento de JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90964.html" >Efectos 3 -D con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90916.html" >JavaScript Nodo Tipos </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91071.html" >Cómo establecer el valor de un iFrame </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90948.html" >Cómo analizar una cadena de consulta en JavaScript </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>Conocimiento de la computadora © http://www.ordenador.online</div>
</div>
</body>
</html> 