La propiedad de visibilidad de estilo en HTML DOM se utiliza para establecer la visibilidad de un elemento . Se utiliza para ocultar o mostrar el elemento. Devuelve la propiedad de visibilidad que se le da a un elemento.
Sintaxis:
- Devuelve la propiedad de visibilidad.
object.style.visibility
- Se utiliza para establecer la propiedad de visibilidad.
object.style.visibility = "visible | hidden | collapse | initial | inherit"
Valores de propiedad:
- visible: Se utiliza para especificar el elemento a ser visible. Es un valor predeterminado.
- oculto: el elemento no está visible, pero afecta el diseño.
- colapsar: Oculta el elemento cuando se usa en una fila de la tabla o en una celda.
- initial: establece la propiedad de visibilidad en su valor predeterminado.
- heredar: esta propiedad se hereda de su elemento padre.
Valor devuelto: Devuelve una string que representa el contenido a mostrar o no para un elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style visibility Property </h2>
<p id="gfg"> A Computer science portal for geeks</p>
<button type="button" onclick="geeks()">
Change visibility
</button>
<script>
function geeks() {
document.getElementById(
"gfg").style.visibility = "hidden";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green;;">
GeeksForGeeks
</h1>
<h2>DOM Style visibility Property </h2>
<p id="gfg" style="visibility:hidden;">
A Computer science portal for geeks</p>
<button type="button" onclick="geeks()">
Change visibility
</button>
<p id="y"></p>
<script>
function geeks() {
var x = document.getElementById(
"gfg").style.visibility;
document.getElementById('y').innerHTML = x;
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad de visibilidad de estilo DOM se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 4 y superior
- Firefox 1 y superior
- Ópera 4 y superior
- Apple Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA