La propiedad de visibilidad se utiliza para ocultar o mostrar el contenido de los elementos HTML. La propiedad de visibilidad especifica que el elemento está actualmente visible en la página. El valor ‘oculto’ se puede utilizar para ocultar el elemento. Esto oculta el elemento pero no elimina el espacio ocupado por el elemento, a diferencia de la propiedad de visualización.
Sintaxis:
element.style.visibility = 'hidden'; element.style.visibility = 'visible';
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 80px;
width: 250px;
border: 2px solid black;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
</div>
<p>
Click the buttons to show or hide the green box
</p>
<button onclick="showElement()">
Show Element
</button>
<button onclick="hideElement()">
Hide Element
</button>
<script type="text/javascript">
function showElement() {
element = document.querySelector('.container');
element.style.visibility = 'visible';
}
function hideElement() {
element = document.querySelector('.container');
element.style.visibility = 'hidden';
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA