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
funciona en IExplorer, Firefox, Chrome, Safari y Opera,
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. Por cierto puedes observar como el botón de "Cerrar", que hay más abajo, solo
funciona en IExplorer.