Cómo cerrar un DIV en JavaScript

Escrito por cathlene s. baptista | Traducido por maria della cella figueredo
Cómo cerrar un DIV en JavaScript

Utiliza JavaScript para cerrar de forma dinámica los elementos de contenido HTML, como las secciones de DIV.

Comstock/Comstock/Getty Images

Cuando los buscadores web cargan páginas HTML, generan una representación de una página en una estructura de árbol invertida que puede manipularse de forma dinámica usando JavaScript. La manipulación de la interfaz de la página del usuario se administra al asignar elementos en las referencias de la página (ID o nombres) que pueden identificarse y modificarse en respuesta a las interacciones de los usuarios, como los botones para hacer clic. Este proceso le permite a los desarrolladores web abrir, cerrar, mover o eliminar elementos identificados, como secciones de DIV, en respuesta a las interacciones del usuario.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre un editor de textos y crea un nuevo archivo de texto, por lo general al seleccionar "Nuevo" desde el menú de "Archivo". Agrega algunas etiquetas HTML al archivo y nómbralo closeDiv.html. Luego del Paso 1, closeDiv.html lucirá así: <html> <head></head> <body></body> </html>

  2. 2

    Edita closeDiv.html al agregar las etiquetas <script> y </script> al HTML. Coloca estas etiquetas entre <head> y </head> y dale a <script> un tipo de atributo de texto/javascript para indicar el lenguaje del script. Luego del Paso 2, closeDiv.html lucirá así: <html> <head> <script type="text/javascript"> </script> </head> <body></body> </html>

  3. 3

    Declara una función de JavaScript entre las etiquetas <script> y </script> nombradas closeThisDiv() y sigue la declaración con dos llaves. Luego del Paso 3, closeDiv.html lucirá así: <html> <head> <script type="text/javascript"> function closeThisDiv() { } </script> </head> <body></body> </html>

  4. 4

    Declara una variable nombrada openDiv entre las llaves de apertura y cierre de la función. Utiliza el método document.getElementbyld() para recuperar una referencia al divName del div y asignar la referencia a la variable openDiv. Luego del Paso 4, createTable.html lucirá así: <html> <head> <script type="text/javascript"> function closeThisDiv() { var openDiv = document.getElementById('divName'); } </script> </head> <body></body> </html>

  5. 5

    Ajusta el estilo de la variable openDiv a "none". Este estilo indica que el elemento divName DIV no se debería visualizar y se debe quitar de la estructura del formato. Luego del Paso 5, closeDiv.html lucirá así: <html> <head> <script type="text/javascript"> function closeThisDiv() { var openDiv = document.getElementById('divName'); openDiv.style.display = 'none'; } </script> </head> <body></body> </html>

  6. 6

    Agrega la etiqueta <div> entre las etiquetas <body> y <body> de closeDiv.html y ajusta el valor del ID de la etiqueta a "divName" (se trata de la referencia de la etiqueta). Agrega el texto "Este texto es un DIV" luego de la etiqueta de apertura <div> y la de cierra </div>. Luego del Paso 6, closeDiv.html lucirá así: <html> <head> <script type="text/javascript"> function closeDiv() { var openDiv = document.getElementById('divName'); openDiv.style.display = 'none'; } </script> </head> <body> <div id="divName"> This text is in the DIV </div> </body> </html>

  7. 7

    Agrega la etiqueta <button> de inmediato luego de la etiqueta de cierre </div>. Asígnale un evento onClick al botón y ajusta su valor a "javascript:closeDiv()" para indicar cómo se debería llamar la función closeDiv() cuando se hace clic en el botón. Dale al botón el texto "Clic to close the DIV" y cierra la etiqueta </button>. Luego del Paso 7, closeDiv.html lucirá así: <html> <head> <script type="text/javascript"> function closeThisDiv() { var openDiv = document.getElementById('divName'); openDiv.style.display = 'none'; } </script> </head> <body> <div id="divName"> This text is in the DIV </div> <button onClick="javascript:closeThisDiv();">Click to close the DIV</button> </body> </html>

  8. 8

    Abre closeDiv.html en un buscador web. Haz clic en "Hacer clic para cerrar el DIV" para cerrar la etiqueta divName div.

Consejos y advertencias

  • Los valores del ID (referencia) asignados a los elementos con el propósito de manipular el diseño de una página, se le puede dar estilo al usar plantillas de estilo en cascada.
  • Los bloques pueden tomar estilo usando varios valores de propiedad, incluyendo ninguno, bloque, en línea, lista de objetos y otros.
  • El valor que se visualiza por defecto es en línea, así que si no se ofrece ningún valor en pantalla, generará un bloque en línea sin línea de quiebre antes o después del elemento.
  • Si la opción de visualización es ninguna, ésta no creará bloques o quitará el bloque de la pantalla. No hace que el bloque sea invisible.

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2015 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media