Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the difference between height and outerHeight in jQuery?
height() in jQuery
The height() method returns the vertical measurement of an element's content area. It excludes padding, border, and margin, giving you only the inner height of the element.
To get the height of an element in jQuery, use the height() method.
Example
You can try to run the following code to get the height ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Height of div element: " + $("div").height());
});
});
</script>
</head>
<body>
<div style="height:100px;width:350px;padding:10px;margin:10px;border:1px solid red; background-color:blue;"></div>
<br>
<button>Get Height of div</button>
</body>
</html>
The output of the above code is ?
Height of div element: 100
outerHeight() in jQuery
The outerHeight() method returns the outer height of the first matched element. It includes padding and border by default. You can also pass true as a parameter to include margins in the calculation.
Example
You can try to run the following code to get the outer height in jQuery ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Outer Height of div element: " + $("div").outerHeight());
});
});
</script>
</head>
<body>
<div style="height:200px;width:450px;padding:10px;margin:10px;border:1px solid red; background-color:blue;"></div>
<br>
<button>Get Outer Height of div</button>
</body>
</html>
The output of the above code is ?
Outer Height of div element: 222
Key Differences
The main difference between height() and outerHeight() is what they include in their measurements:
? height(): Content area only (excludes padding, border, margin)
? outerHeight(): Content + padding + border (optionally includes margin with outerHeight(true))
Conclusion
Use height() when you need the inner content dimensions and outerHeight() when you need the total space an element occupies including its styling properties.
2K+ Views
