Computación y electrónica

Cómo ocultar un elemento DIV en JavaScript

Escrito por kevin lee | Traducido por pilar celano
Cómo ocultar un elemento DIV en JavaScript

Programación.

Jupiterimages/Creatas/Getty Images

Ocultar elementos de un sitio web es una manera de añadirle efectos especiales interesantes. Por ejemplo, si colocas una imagen dentro de un elemento DIV, puedes crear un botón que alterne la visibilidad de la imagen. Un DIV es un elemento HTML especial que consiste en una etiqueta DIV de apertura y una de cierre. Todo lo que se encuentre dentro de esas dos etiquetas formará parte del bloque DIV. Si utilizas JavaScript para alternar la visibilidad del DIV, alternarás también la visibilidad de todos los elementos que se encuentren en el bloque.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el bloc de notas y y pega el siguiente código HTML en un documento nuevo: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Div Test</title> </head> <body> <div id="div1"> Inside div1 </div> <input id="Button1" type="button" value="Click to toggle visibility" onclick="return ToggleDiv()" /> </body> </html> Las primeras tres líneas del código luego de la etiqueta <body> (cuerpo) inicial crean un bloque DIV. La ID (identificación) es div1. El código JavaScript puede identificar este bloque DIV por medio de esa ID. Observa que el texto "Inside div1" (dentro div1) aparece entre las etiquetas de apertura y cierre del bloque DIV. La línea de código que se encuentra luego del bloque DIV crea un botón que puedes utilizar para probar la función de alternancia. Cuando haces clic, el botón activa una función de JavaScript llamada ToggleDIV. La función muestra o esconde el DIV.

  2. 2

    Añada el siguiente código JavaScript luego de la sección del título del documento HTML: <script language="javascript" type="text/javascript"> var visibilityState = "visible"; function ToggleDIV() { var divBlock = document.getElementById("div1"); if (visibilityState == "visible") visibilityState = "hidden"; else visibilityState = "visible"; divBlock.style.visibility = visibilityState; } </script> Esta función se activa cuando los usuarios hacen clic en el botón descrito en el paso anterior. Cada vez que la función se ejecuta, el valor de "visibilityState" (estado de visibilidad) se alterna entre "visible" (visible) y "hidden" (oculto). La función establece la propiedad de la visibilidad DIV en el valor almacenado en "visibilityState".

  3. 3

    Guarda el documento con formato HTML y ábrelo en tu explorador. Las palabras "Inside div1" (dentro div1) aparecen arriba del botón "Click to Toggle Visibility" (hacer clic para alternar la visibilidad).

  4. 4

    Haz clic en el botón. La función de JavaScript funciona y oculta el DIV que contiene el texto. Vuelve a hacer clic en el botón para hacer que el DIV y el texto se vuelvan visibles. El texto aparece y desaparece a medida que continúas haciendo clic en el botón.

Consejos y advertencias

  • Observa que la identificación del DIV es div1. La primera línea en la función JavaScript también recurre a div1. Cambia div1 por cualquier valor que desees. Si cambias ese valor, asegúrate de hacerlo en todos los lugares en los que aparece en el documento HTML.
  • En este ejemplo, el DIV contiene un texto simple. Puedes colocar otros elementos HTML, como botones, imágenes y formas, dentro del bloque DIV. Todos los elementos que se encuentren en el DIV aparecerán y desaparecerán cuando los usuarios hagan clic en el botón de alternancia.

Más galerías de fotos

comentarios

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-2014 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