Propriedade visibility do estilo

Definição e uso

visibility A propriedade define ou retorna se o elemento deve ser visível.

visibility A propriedade permite que o autor mostre ou oculte o elemento.

Esta propriedade é semelhante a Propriedade displayNo entanto, a diferença é que, se você definir display:noneO que oculta todo o elemento, mas visibility:hidden Isso significa que o conteúdo do elemento não será visível, mas ele manterá sua posição e tamanho original.

Veja também:

Tutorial CSS:CSS Display e visibility

Manual de referência CSS:Propriedade visibility

Exemplo

Exemplo 1

Ocultar o conteúdo do elemento <p>:

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

Experimente pessoalmente

Mais exemplos estão disponíveis na parte inferior da página.

Sintaxe

Retornar a propriedade visibility:

object.style.visibility

Definir a propriedade visibility:

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

Valor da propriedade

Valor Descrição
visible O elemento é visível. Padrão.
hidden O elemento é invisível, mas ainda afeta o layout.
collapse Quando usado em linhas de tabela ou células, o elemento é invisível (igual a "hidden").
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: visible
Retorno: String que representa se o conteúdo do elemento está visível.
Versão do CSS: CSS2

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Mais exemplos

Exemplo 2

A diferença entre as propriedades display e visibility:

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

Experimente pessoalmente

Exemplo 3

Alternar entre ocultar e mostrar elementos:

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

Experimente pessoalmente

Exemplo 4

Ocultar e mostrar o elemento <img>:

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

Experimente pessoalmente

Exemplo 5

Retorna o tipo de visibilidade do elemento <p>:

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

Experimente pessoalmente