The jQuery outerHeight() method returns the outer height of the selected element. The value of outer height includes the padding and border of the element.
It can also include the margin property by passing the boolean value as a parameter.
Syntax of jQuery outerHeight() Method
The syntax of this method is given below:-
Description of the Parameters
The description of the parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | You have to specify the element class, id, or tag name to select the elements and return or sets the outer height. |
| includeMargin | It is the boolean value to include the margin with height for the selected element. If you specify true, it includes the margin with outer height. false indicates that the margin is not included with outer height. |
jQuery outerHeight() Method Returns the Value of Outer Height
If you want to get the outer height for the selected element, you have to use the method as given below. It returns the outer height of the element if specified in the selected element.
The below example contains the button and the div element. The div element contains some width and height including the padding and margin.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mygetbtn').click(function(){ var mydivht = $(".divht").outerHeight(); alert(mydivht); }); }); </script> <style> .divht{ width:100px; height:100px; border:1px solid #ccc; padding:20px; margin:10px; } </style> <button type="button" class="mygetbtn">Click to Return Outer Height</button><br><br> <div class="divht"></div> |
Output
You have to click the button given above to get the outer height in the alert box. The outer height includes the element height and padding but not the margin.
How to Include Margin with Outer Height
To get the margin with the outer height, you have to pass ‘true’ as the parameter of the method. See the example below contains the same elements as given above.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mygetbtn1').click(function(){ var mydivht1 = $(".divht1").outerHeight(true); alert(mydivht1); }); }); </script> <style> .divht1{ width:100px; height:100px; border:1px solid #ccc; padding:20px; margin:10px; } </style> <button type="button" class="mygetbtn1">Click to Return Outer Height Including Margin</button><br><br> <div class="divht1"></div> |
Output
Click the button given above to get the outer height in the alert box including the margin. You will get different outer height values from the previous example value.
You may also like to read
I hope you like this tutorial on jQuery outerHeight() method. If you have any queries regarding the tutorial, please comment below.
References