En este artículo, aprenderemos cómo obtener la altura de un div usando jQuery. En jQuery, el método de altura se usa para obtener la altura de cualquier elemento en HTML. El método de altura establece y devuelve la altura de los elementos HTML.
Método 1: El método height() devuelve la altura del primer elemento coincidente, pero el método height(value) establece la altura de todos los elementos coincidentes.
// Returns the height of the first matched element $(selector).height() // Set the height of the all matched elements $(selector).height(value);
Entonces, con la ayuda del método height(), encontraremos la altura del div.
// Returns the height of the first matched div
$("div").height()
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<!-- Link of jQuery CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<!-- div element -->
<div style="color: red;
background-color: black;
margin: 80px 80px;
padding: 40px 400px;">
This is the div.
<p></p>
<button>
Click to see the height of div
</button>
</div>
<script>
// After click btn, it will show
// the height of the div
$("button").click(function () {
// Height of the div
var height = $("div").height();
// Show the height of the div
$("p").html("height of the div :" + height);
});
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Método 2: jQuery usa el método innerHeight() para verificar la altura interna de un elemento, incluido el relleno.
Sintaxis:
$("param").innerHeight()
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#demo {
height: 150px;
width: 350px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightgreen;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
var msg = "";
msg += "Inner Height of div: " + $("#demo").
innerHeight() + "</br>";
$("#demo").html(msg);
});
});
</script>
</head>
<body>
<div id="demo"></div>
<button>Click Me!!!</button>
<p>
Click on the button and check
the innerHeight of an element
(includes padding).
</p>
</body>
</html>
Salida:
Antes de hacer clic en el botón «Hacer clic en mí»: 
Después de hacer clic en el botón «Hacer clic en mí»:
Método 3: este enfoque utiliza el método outerHeight() para encontrar la altura exterior del elemento especificado. La altura exterior de un elemento incluye relleno y borde.
Sintaxis:
$(selector).outerHeight(includeMargin)
Ejemplo: Este ejemplo muestra la altura exterior de un elemento.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Style to create box using
padding and margin -->
<style>
.geeks {
height: 80px;
width: 200px;
padding: 5px;
margin: 5px;
border: 2px solid black;
background-color: green;
text-align: center;
}
</style>
<!-- Script to return outer height -->
<script>
$(document).ready(function () {
$("button").click(function () {
alert("Outer height of div: "
+ $("div").outerHeight());
});
});
</script>
</head>
<body>
<div class="geeks">
GeeksforGeeks
</div>
<button>
Click Here to display outer height
</button>
</body>
</html>
Salida:
Antes Haga clic en el botón: 
Después Haga clic en el botón:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA