Publicado por alvlin, el 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) 
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
29/12/2007, a las 22:08
Por accesibilidad es preferible que no esté oculto por CSS, sino que se oculte por Javascript al cargar la página. De esa forma, si Javascript está deshabilitado el contenido de la página se mostrará sin problemas.
29/12/2007, a las 22:53
Hola jervert,
Lo que decís es cierto, si el elemento contiene una parte importante de la página.
Sin embargo, no es cierto en todos los casos. En mensajes de alerta por ejemplo, o en menúes desplegables, a veces no es un problema tan grave que el elemento no se vea, siempre que la navegación esté planeada considerando que Javascript puede estar deshabilitado.
Creo que estos últimos casos son más frecuentes, y son los que realmente justifican mostrar/ocultar un elemento.
25/07/2008, a las 13:07
hola, bastante sencilla la explicacion, pero me surge una duda, necesito ocultar varios divs y qeu cuando es click en un vinculo de habilite uno y los demas si es que estaban visibles se oculten…se podra con el mismo metodo?
25/07/2008, a las 20:26
@miguel,
Se puede hacer haciendo un pequeño agregado.
Creo que lo mejor es guardar el último elemento que mostraste en una variable, de tal forma que la función encargada de mostrar un div tenga la información de cuál div mostró antes. Así, primero oculta el último mostrado y luego muestra el que le indiques.
Algo así:
div_mostrado = null; function mostrar_div(div_para_mostrar) { if (div_mostrado != null) { div_mostrado.display = "none"; } div_para_mostrar.display = "block"; div_mostrado = div_para_mostrar; }Eso es suficiente, solamente te queda para que hagas el código que llama a la función con el parámetro correspondiente.