How to get the height of a div using jQuery ?
Last Updated :
15 Apr, 2024
In this article, we will learn how to get the height of a div using jQuery. In jQuery, height method is used to get the height of any element in HTML. The height method sets and returns the height of the HTML elements.
Method 1: The height() method returns the first matched element’s height, But the height(value) method sets all matched elements height.
// Returns the height of the first matched element
$(selector).height()
// Set the height of the all matched elements
$(selector).height(value);
So with the help of the height() method, we will find the height of the div.
// Returns the height of the first matched div
$("div").height()
Example:
<!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">
<script src=
</script>
</head>
<body>
<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>
|
Output:
Before clicking the button:
After clicking the button:
Method 2: jQuery use innerHeight() method to check inner height of an element including padding.
Syntax:
$("param").innerHeight()
Example:
<!DOCTYPE html>
<html>
<head>
<script src=
</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>
|
Output:
Before clicking on “Click Me” button:
After clicking on “Click Me” button:
Method 3: This approach uses outerHeight() method to find the outer height of the specified element. The outer height of an element includes padding and border.
Syntax:
$(selector).outerHeight(includeMargin)
Example: This example displays the outer height of an element.
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
.geeks {
height: 80px;
width: 200px;
padding: 5px;
margin: 5px;
border: 2px solid black;
background-color: green;
text-align: center;
}
</style>
<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>
|
Output:
Before Click on the button:
After Click on the button:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...