Propriedade de visibilidade CSS
Exemplo
Torne os elementos <h2> visíveis e ocultos:
h2.a {
visibility: visible;
}
h2.b {
visibility: hidden;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A visibility
propriedade especifica se um elemento é visível ou não.
Dica: Elementos ocultos ocupam espaço na página. Use a propriedade display para ocultar e remover um elemento do layout do documento!
Valor padrão: | visível |
---|---|
Herdado: | sim |
Animavel: | sim. Leia sobre animáveis |
Versão: | CSS2 |
Sintaxe JavaScript: | objeto .style.visibility="hidden" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
visibility | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
Sintaxe CSS
visibility: visible|hidden|collapse|initial|inherit;
Valores de propriedade
Value | Description | Play it |
---|---|---|
visible | Default value. The element is visible | |
hidden | The element is hidden (but still takes up space) | |
collapse | Only for table rows (<tr>), row groups (<tbody>), columns (<col>),
column groups (<colgroup>). This value removes a row or column,
but it does not affect the table layout. The space taken up by the row or column
will be available for other content. If collapse is used on other elements, it renders as "hidden" |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Este exemplo demonstra como fazer com que um elemento de tabela seja recolhido:
tr.collapse {
visibility: collapse;
}
Páginas relacionadas
Tutorial CSS: Exibição e visibilidade CSS
Referência HTML DOM: propriedade de visibilidade