Style visibility Property

Ejemplo

Ocultar el contenido de un <p> elemento:

document.getElementById("myP").style.visibility = "hidden";

Definición y Uso

Las establece o devuelve la propiedad de visibilidad si un elemento debe ser visible.

La propiedad de visibilidad permite al autor para mostrar u ocultar un elemento. Es similar a la pantalla de propiedad. Sin embargo, la diferencia es que si se establece display: none, se esconde el elemento completo, mientras que la visibilidad: oculto significa que el contenido del elemento serán invisibles, pero el elemento se mantiene en su posición y tamaño original.

Soporte del navegador

La propiedad de visibilidad es compatible con todos los principales navegadores.

Sintaxis

Devolver la propiedad de visibilidad:

object .style.visibility

Establecer la propiedad de visibilidad:

object .style.visibility="visible|hidden|collapse|initial|inherit"

Valores de propiedad

Valor	Descripción
visible	El elemento es visible. Esto es por defecto
hidden	El elemento no es visible, pero aún afecta a la disposición
collapse	Cuando se utiliza en una fila de la tabla o celda, el elemento no es visible (same as "hidden")
initial	Establece esta propiedad a su valor por defecto. Lea acerca inicial
inherit	Hereda esta propiedad de su elemento padre. Lea acerca de heredar

Detalles técnicos

Valor por defecto:	visible
Valor de retorno:	Una cadena, que representa si el contenido de un elemento se visualiza o no
Versión CSS	CSS2

Más ejemplos

Ejemplo

Diferencia entre la propiedad de presentación y la propiedad de visibilidad:

function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}

function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}

Inténtalo tú mismo "

Ejemplo

Ocultar y mostrar un <img> elemento:

function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}

function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}

Inténtalo tú mismo "