Display: none

Vamos a usar dos imágenes para demostrar la propiedad display:

Imagen 1. Display=inline

Imagen 2. Display=none

La segunda imagen no es visible y el espacio es ocupado por el contenido que está a continuación (este párrafo y los siguientes).


Utilización en scripts

Este es un ejemplo muy sencillo del uso que puede tener el valor none para la propiedad display en JavaScript. Se trata de un párrafo normal que al recibir un click esconde o muestra alternativamente el contenido de un elemento DIV.

HACER CLICK AQUÍ PARA OCULTAR O MOSTRAR

Este párrafo está contenido dentro de un DIV al cual, mediante JavaScript, se le cambia la propiedad display para que sea visible si está oculto o para que desaparezca si está visible. Cuando no es visible, el lugar que ocupaba es llenado por el contenido que está a continuación en la página.

Estas son las propiedades usadas:

<p style="cursor:s-resize" onClick="Alternar(seccion1)">
   HACER CLICK AQUÍ PARA OCULTAR O MOSTRAR
</p>
<div id="seccion1" style="display:">
   Este párrafo está contenido dentro de un DIV...
</div> 

Cuando se señala el primer párrafo, el cursor del ratón se transforma en una flecha hacia abajo [cursor: s-resize] para indicar visualmente la acción. Al hacer un click en el párrafo se llama a la función Alternar del script y se identifica al DIV que se va a ocultar o mostrar [onClick="Alternar(seccion1)"].

El DIV tiene un nombre único [ID="seccion1"] que se usa como parámetro al llamar la función Alternar y la propiedad display sin ningún valor.

Ahora, éste es el script:

function Alternar(Seccion){ 
    if (Seccion.style.display=="none"){Seccion.style.display=""}
    else{Seccion.style.display="none"} 
}

Lo que hace es verificar si el elemento que se pasa como argumento (en este ejemplo es seccion1) tiene el valor none para la propiedad display [if (Seccion.style.display=="none")] y en ese caso le elimina el valor none [{Seccion.style.display=""}], en caso contrario le pone el valor none al elemento [else{Seccion.style.display="none"}].


Este script sólo funciona en IExplorer 4 ó superior y no pretende enseñar el uso de JavaScript sino una posible aplicación de la propiedad display. Lo interesante en este caso es que casi todo puede resolverse mediante el uso de estilos, por ejemplo el párrafo que actúa como disparador de la función tiene asignada la propiedad cursor:s-resize para que haya alguna indicación visual sin la necesidad de usar un link en el párrafo. De igual modo, el script se resuelve sencillamente cambiando el valor de la propiedad display sin necesidad de apelar a ningún otro recurso.

Desgraciadamente, Netscape implementa de otro modo el modelo de objeto del documento (DOM) por lo que el Script de esta página no funciona en él. Esto es importante saberlo, ya que si definiéramos en el DIV [<div id="seccion1" style="display:none">] éste sería inicialmente invisible y los usuarios de Netscape u otro navegador que no pueda procesar el script no verían el contenido del DIV.

Implementar un script que funcione en ambos navegadores es una tarea un tanto compleja. Para quienes estén interesados en el tema he incluido una página con un ejemplo de menúes desplegables perteneciente a Thomas Brattli (www.bratta.com) que obtuve de su página.

El autor permite el uso de su trabajo con la condición de que se mantenga intacto el mensaje inicial del script, de modo que pueden modificarlo a su gusto y utilizarlo sin inconvenientes (he traducido los comentarios para facilitarles ese trabajo). Pueden visitar la página Brattli para obtener otros ejemplos de JavaScript que podrán usar en sus páginas, en cuyo caso recuerden dejar el aviso que indica de donde los obtuvieron (no nos cuesta nada y es una forma de agradecerle su ayuda).