¿Cómo hacer para ocultar y mostrar un elemento de la página?
Las propiedades display y visibility
Hacer que un elemento se oculte o se muestre según las acciones del usuario es un efecto muy práctico y que da una buena sensación de interactividad.
Para controlar la visibilidad de un elemento se dispone de las
propiedades de CSS display y visibility. Ambas propiedades
controlan la forma en que se muestra un elemento cualquiera de la página.
Si se considera el siguiente código HTML:
<div id="un_div">Cambiando el valor de display se puede lograr:
Que se vea normalmente como una caja (modo por defecto)
#un_div { display : block; }Que no se vea ni ocupe espacio en la página:
#un_div { display : none; }
Se puede jugar también con el valor de visibility. Esta propiedad
controla si el elemento se ve o se vuelve transparente. No se puede
decir que lo oculte, porque seguirá ocupando espacio normalmente. Esta
es la principal diferencia con display, ya que un elemento oculto
mediante ésta última propiedad no ocupa espacio en la página.
En realidad la diferencia es bastante mayor, ya que display tiene el
control de cómo se muestra el elemento (como una caja, como un elemento
en línea, como una tabla, como una fila de tabla, etc).
Se puede ver un ejemplo del funcionamiento de ambas propiedades en esta página de ejemplo.
Controlar la visibilidad con Javascript
Supongamos que el “div” mostrado antes está oculto por CSS:
#un_div { display : none; }El primer paso es obtener el nodo del div en una variable:
var div = document.getElementById("un_div");Luego, acceder a los estilos del elemento con el atributo style
div.style.display = "block"Y listo, aparece el div por arte de MagiaScript(tm) :-P
Para ocultarlo basta poner display a none:
div.style.display = "none"Si se prefiere usar visibility, el procedimiento es idéntico, solo
que se usarán el valor visible para que el elemento se vea, y
hidden para que se oculte.
Notas:
- No es necesario guardar el nodo en una variable, pero es más rápido hacerlo si se deben hacer más modificaciones en él.
- Esto funciona de la misma forma en cualquier elemento de la página, no es necesario que sea un div
Enlaces relacionados
Activa Javascript para para cargar los comentarios, basados en DISQUS