Propriedade de visibilidade do estilo
Exemplo
Oculte o conteúdo de um elemento <p>:
document.getElementById("myP").style.visibility = "hidden";
Definição e uso
A propriedade de visibilidade define ou retorna se um elemento deve ser visível.
A propriedade de visibilidade permite que o autor mostre ou oculte um elemento. É semelhante à propriedade de exibição . No entanto, a diferença é que, se você definir display:none
, ele ocultará todo o elemento, enquanto visibility:hidden
significa que o conteúdo do elemento ficará invisível, mas o elemento permanecerá em sua posição e tamanho originais.
Suporte ao navegador
Property | |||||
---|---|---|---|---|---|
visibility | Yes | Yes | Yes | Yes | Yes |
Sintaxe
Retorne a propriedade de visibilidade:
object.style.visibility
Defina a propriedade de visibilidade:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Valores de propriedade
Value | Description |
---|---|
visible | The element is visible. This is default |
hidden | The element is not visible, but still affects layout |
collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Detalhes técnicos
Valor padrão: | visível |
---|---|
Valor de retorno: | Uma String, representando se o conteúdo de um elemento é exibido ou não |
Versão CSS | 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";
}
Exemplo
Alterne entre ocultar e mostrar um elemento:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Exemplo
Oculte e mostre um elemento <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Exemplo
Retorne o tipo de visibilidade de um elemento <p>:
alert(document.getElementById("myP").style.visibility);
Páginas relacionadas
Tutorial CSS: Exibição e visibilidade CSS
Referência CSS: propriedade de visibilidade
❮ Objeto de estilo