Tanto la propiedad de visibilidad como la de visualización son muy útiles en CSS. La visibilidad: “oculta”; La propiedad se utiliza para especificar si un elemento es visible o no en un documento web, pero los elementos ocultos ocupan espacio en el documento web. La visibilidad es una propiedad en CSS que especifica el comportamiento de visibilidad de un elemento. La propiedad de visualización en CSS define cómo se colocarán los componentes (como div, hipervínculo, encabezado, etc.) en la página web. La propiedad display: “none” se utiliza para especificar si un elemento existe o no en el sitio web.
Propiedad de visibilidad: esta propiedad se utiliza para especificar si un elemento es visible o no en un documento web, pero los elementos ocultos ocupan espacio en el documento web.
Sintaxis:
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.
Propiedad de visualización: la propiedad de visualización en CSS define cómo se colocarán los componentes (div, hipervínculo, encabezado, etc.) en la página web.
Sintaxis:
display: none | inline | block | inline-block;
Valores de propiedad:
- none: No mostrará ningún elemento.
- en línea: Es el valor por defecto. Representa el elemento como un elemento en línea.
- bloque: Representa el elemento como un elemento a nivel de bloque.
- bloque en línea: representa el elemento como un cuadro de bloque dentro de un cuadro en línea.
Entonces, la diferencia entre mostrar: «ninguno»; y visibilidad: “oculto” ; directamente desde el nombre en sí podemos notar la diferencia como pantalla: «ninguno» ; elimina por completo la etiqueta, ya que nunca había existido en la página HTML mientras que la visibilidad: «oculto» ; solo hace que la etiqueta sea invisible, seguirá en la página HTML ocupando espacio, es simplemente invisible.
Ejemplo: Este ejemplo ilustra el uso de la propiedad de visibilidad y la propiedad de visualización en CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Difference between display:"none"; and visibility: "hidden"; </title> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> display:"none"; and visibility: "hidden"; </h3> <div class="display"> <b> display: <span style="display:none"> display:none </span> "none"; </b> </div> <br> <div class="visibility"> <b> visibility: <span style="visibility:hidden"> visibility:hidden </span> "hidden"; </b> </div> <p> You can see that the display: "none"; don't have any blank space and visibility: "hidden": has the blank space. </p> </center> </body> </html>
Salida: en el intervalo de visibilidad, la etiqueta aún existe, ya que puede ver el espacio entre ellas, mientras que la pantalla eliminó la etiqueta.
Visualización y visibilidad en JavaScript:
Sintaxis:
mostrar = «ninguno»;
document.getElementById("Id").style.display = "none";
visibilidad = «oculto»;
document.getElementById("Id").style.visibility = "hidden";
Ejemplo: este ejemplo ilustra el uso de la propiedad de visualización y la propiedad de visibilidad en Javascript.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 800px;
height: 200px;
border: 2px solid black;
}
.right {
float: right;
margin: 10px;
}
.left {
float: left;
margin: 10px;
}
#geek {
width: 200px;
height: 55px;
background-color: yellow;
}
#geek1 {
width: 200px;
height: 55px;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>
Effect of <code>display:"none"</code>
and <code>visibility="hidden"</code>
</b>
<br>
<div class="container">
<div class="right">
<div id="geek1">
On clicking the below button this div
tag still exists but invisible.
</div>
<br>
<button onclick="visibility()">
visibility="hidden"
</button>
<p> This line will be still and won't go up as the
<br>above div tag still exists but invisible.
</p>
</div>
<div class="left">
<div id="geek">
On clicking the below button this div tag won't exist.
</div>
<br>
<button onclick="display()">display="none"</button>
<p>This line will go up as the above div tag none.</p>
</div>
</div>
</center>
<script>
function display() {
document.getElementById("geek").style.display = "none";
}
function visibility() {
document.getElementById("geek1").style.visibility = "hidden";
}
</script>
</body>
</html>
Salida: desde la salida a continuación, cuando se hace clic en el botón de visualización, toda la página se desplaza hacia arriba y ocupa el espacio de la etiqueta <div> eliminada, mientras que cuando se hace clic en el botón de visibilidad , no se desplaza como la etiqueta <div> aún existe en forma invisible.
