domingo, 1 de marzo de 2009

Mostrar y Ocultar DIV's

Para hacer aplicaciones web más dinámicas, que puedan incluir elementos que aparezcan y se oculten, hace falta "jugar" con las propiedades del estilo de los elementos; en este ejemplo mostraré como se pueden modificar dichas propiedades mediante JavaScript.
Este sería el código JavaScript con las funciones que mostrarán y Ocultarán el DIV.

function quitar()
{
div = document.getElementById('uno');
div.style.display="none";
}

function poner()
{
div = document.getElementById('uno');
div.style.display="block";
}

function ocultar()
{
div = document.getElementById('uno');
div.style.visibility="hidden";
}

function mostrar()
{
div = document.getElementById('uno');
div.style.visibility="visible";
}

Las primeras dos funciones, quitar() y poner(), modifican el atributo display, en el caso de quitar(), el DIV dejará de ocupar un espacio, y poner() revertirá el cambio.
Las funciones ocultar() y mostrar() cambiarán el atributo visibility, que solo hará que no se muestre el contenido del DIV, pero a diferencia de display, el DIV seguirá ocupando el espacio que le corresponde.

 div id="uno" style="background-color:#CCCCCC">
Contenido de UNO
 /div>

Atributo display
<input type="button" value="Quitar" onclick="quitar()" />
<input type="button" value="Poner" onclick="poner()" />

Atributo visibility
<input type="button" value="Ocultar" onclick="ocultar()" />
<input type="button" value="Mostrar" onclick="mostrar()" />