Propiedad visibility de estilo

Definición y uso

visibility La propiedad establece o devuelve si el elemento debe ser visible.

visibility La propiedad permite que el autor muestre u oculte elementos.

Esta propiedad es similar a Propiedad display. Pero la diferencia es que si se establece display:none, ocultará todo el elemento, mientras que visibility:hidden Significa que el contenido del elemento no será visible, pero el elemento mantendrá su posición y tamaño originales.

Véase también:

Tutorial de CSS:CSS Display y visibility

Manual de referencia de CSS:Propiedad visibility

Ejemplo

Ejemplo 1

Ocultar el contenido del elemento <p>:

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

Prueba por tu cuenta

Más ejemplos se proporcionan en la parte inferior de la página.

Sintaxis

Devolver propiedad visibility：

object.style.visibility

Establecer propiedad visibility：

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

Valor del atributo

Valor Descripción
visible Este elemento es visible. Predeterminado.
hidden El elemento es invisible, pero aún afecta el diseño.
collapse Al usarlo en filas o celdas de tablas, el elemento es invisible (igual que "hidden").
initial Establece este atributo a su valor predeterminado. Véase initial.
inherit Hereda este atributo de su elemento padre. Véase inherit.

Detalles técnicos

Valor predeterminado: visible
Valor de retorno: Cadena que indica si el contenido del elemento se muestra o no.
Versión de CSS: CSS2

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Más ejemplos

Ejemplo 2

La diferencia entre las propiedades display y visibility:

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

Prueba por tu cuenta

Ejemplo 3

Cambiar entre ocultar y mostrar elementos:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

Prueba por tu cuenta

Ejemplo 4

Ocultar y mostrar elementos <img>:

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

Prueba por tu cuenta

Ejemplo 5

Devuelve el tipo de visibilidad del elemento <p>:

alert(document.getElementById("myP").style.visibility);

Prueba por tu cuenta