Propiedad de visibilidad de estilo
Ejemplo
Ocultar el contenido de un elemento <p>:
document.getElementById("myP").style.visibility = "hidden";
Definición y uso
La propiedad de visibilidad establece o devuelve si un elemento debe ser visible.
La propiedad de visibilidad permite al autor mostrar u ocultar un elemento. Es similar a la propiedad de visualización . Sin embargo, la diferencia es que si establece display:none, oculta todo el elemento, mientras visibility:hiddenque significa que el contenido del elemento será invisible, pero el elemento permanecerá en su posición y tamaño originales.
Compatibilidad con navegador
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Sintaxis
Devuelve la propiedad de visibilidad:
object.style.visibility
Establezca la propiedad de visibilidad:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Valores de propiedad
| 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 |
Detalles técnicos
| Valor por defecto: | visible |
|---|---|
| Valor devuelto: | Una cadena, que representa si el contenido de un elemento se muestra o no. |
| Versión CSS | CSS2 |
Más ejemplos
Ejemplo
Diferencia entre la propiedad de visualización y la propiedad de visibilidad:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Ejemplo
Alternar entre ocultar y mostrar un elemento:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Ejemplo
Ocultar y mostrar un elemento <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Ejemplo
Devuelve el tipo de visibilidad de un elemento <p>:
alert(document.getElementById("myP").style.visibility);
páginas relacionadas
Tutorial de CSS: Visualización y visibilidad de CSS
Referencia CSS: propiedad de visibilidad
❮ Objeto de estilo