Blog ElCodiguero
26 Dec 2009 CSS Javascript

¿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:

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:

Enlaces relacionados

Activa Javascript para para cargar los comentarios, basados en DISQUS

El Blog de ElCodiguero funciona sobre Pelican

Inicio | Blog | Acerca de