Style visibility Property

Exemplo

Esconder o conteúdo de um <p> elemento:

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

Definição e Uso

Os conjuntos de propriedades de visibilidade ou retorna se um elemento deve ser visível.

A propriedade de visibilidade permite ao autor mostrar ou ocultar um elemento. É semelhante à exibição de propriedade. No entanto, a diferença é que se você definir display: none, ele esconde o elemento inteira, enquanto visibility: hidden significa que o conteúdo do elemento será invisível, mas o elemento permanece na sua posição e tamanho original.

Suporte navegador

A propriedade de visibilidade é suportado em todos os principais navegadores.

Sintaxe

Retornar a propriedade de visibilidade:

object .style.visibility

Defina a propriedade de visibilidade:

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

Valores de propriedade

Valor	Descrição
visible	O elemento é visível. Este é o padrão
hidden	O elemento não é visível, mas ainda afeta o layout
collapse	Quando usado em uma linha da tabela ou célula, o elemento não é visível (same as "hidden")
initial	Define essa propriedade para seu valor padrão. Leia sobre inicial
inherit	Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar

Detalhes técnicos

Valor padrão:	visível
Valor de retorno:	A String, que representa se o conteúdo de um elemento é exibido ou não
CSS Versão	CSS2

mais Exemplos

Exemplo

Diferença entre a propriedade de exibição e a propriedade de visibilidade:

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

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

Tente você mesmo "

Exemplo

Ocultar e mostrar um <img> elemento:

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

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

Tente você mesmo "