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).
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
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).