Un elemento HTML se puede ocultar con la ayuda de la función jQuery .hide() o podemos ocultarlo fácilmente haciendo que la visibilidad sea igual a oculta en CSS. Podemos encontrar fácilmente la altura de este elemento oculto en jQuery.
Hay dos tipos de altura que se definen con cada elemento HTML, es decir, la altura interior y la altura exterior del elemento:
- innerHeight: Esta altura se considera cuando no se considera el ancho del borde para el elemento seleccionado.
- outsideHeight: Esta altura se considera cuando se considera el ancho del borde para el elemento seleccionado.
Ejemplo-1: Este ejemplo muestra cómo calcular la altura interna del elemento oculto.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
var demo = $("div").innerHeight();
$("#demo").text(demo);
});
});
</script>
<style>
div {
width: 310px;
height: 80px;
font-weight: bold;
color: green;
font-size: 25px;
border: 1px solid green;
visibility: hidden;
}
body {
border: 1px solid green;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<div>
</div>
<p id="demo">
Here the height of the
hidden "div" element will appear.
</p>
<button id="btn1">Submit</button>
</body>
</html>
Salida:
Antes de hacer clic: 
Después de hacer clic:
Aquí, el ancho del borde no se agregará al resultado.
Ejemplo-2: Este ejemplo muestra cómo calcular la altura exterior del elemento oculto.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
var demo = $("div").outerHeight();
$("#demo").text(demo);
});
});
</script>
<style>
div {
width: 310px;
height: 80px;
font-weight: bold;
color: green;
font-size: 25px;
border: 1px solid green;
visibility: hidden;
}
body {
border: 1px solid green;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<div>
</div>
<p id="demo">
Here the height of the hidden
"div" element will appear.
</p>
<button id="btn1">Submit</button>
</body>
</html>
Salida:
antes de hacer clic:
Después de hacer clic:
aquí, el ancho del borde se agregará al resultado.