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=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programacion/javascript-programming/90983.html' >Cómo ocultar los DIVs Open in JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/90985.html' >Cómo girar Enlaces en JavaScript </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Artículos relacionados </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="/Programacion/javascript-programming/90828.html" title="Un Tutorial de HTML 5 Animación Canvas " target="_self">Un Tutorial de HTML 5 Animación Canvas </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91080.html" title="Cómo hacer mover texto en Steam Games " target="_self">Cómo hacer mover texto en Steam Games </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91228.html" title="Cómo convertir Javascript UTC Fecha de hora del Este " target="_self">Cómo convertir Javascript UTC Fecha de hora del Este </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90997.html" title="Cómo escribir una Div. De JavaScript " target="_self">Cómo escribir una Div. De JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90849.html" title="Cómo mantener el Prototype JS Hasta Fecha " target="_self">Cómo mantener el Prototype JS Hasta Fecha </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91184.html" title="Cómo comparar String de Java Script " target="_self">Cómo comparar String de Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90879.html" title="Cómo incrustar JavaScript en Asp.net " target="_self">Cómo incrustar JavaScript en Asp.net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91123.html" title="Cómo comprobar un tipo numérico en Javascript " target="_self">Cómo comprobar un tipo numérico en Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90969.html" title="Cómo ocultar varios elementos en Javascript " target="_self">Cómo ocultar varios elementos en Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91009.html" title="Cómo visualizar las Horas y Minutos en dos campos con Javascript " target="_self">Cómo visualizar las Horas y Minutos en dos campos con …</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 width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Artículos destacados </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94492.html" title="Cómo crear un conjunto de datos de Gridview " target="_self">Cómo crear un conjunto de datos de Gridview </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92368.html" title="Cómo obtener la ubicación de los archivos temporales en PHP " target="_self">Cómo obtener la ubicación de los archivos temporales …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87650.html" title="Cómo hacer una caja redondeadas con CSS3 " target="_self">Cómo hacer una caja redondeadas con CSS3 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/cc-programming/85526.html" title="Cómo compartir Variables largo CPP " target="_self">Cómo compartir Variables largo CPP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88780.html" title="Fundamentos Awk " target="_self">Fundamentos Awk </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92234.html" title="Cómo especificar un puerto en el código PHP para MySQL " target="_self">Cómo especificar un puerto en el código PHP para MySQ…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87574.html" title="Cómo escribir un cuadro de texto en un archivo C " target="_self">Cómo escribir un cuadro de texto en un archivo C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87557.html" title="Cómo instalar el Turbo Pascal " target="_self">Cómo instalar el Turbo Pascal </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90360.html" title="Cómo capturar una captura de pantalla de un sistema remoto utilizando Java " target="_self">Cómo capturar una captura de pantalla de un sistema re…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86738.html" title="Cómo utilizar DTrace como Profiler Memoria " target="_self">Cómo utilizar DTrace como Profiler Memoria </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<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=middle>Copyright © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
