Description:
The jQuery outerHeight () method is used to GET/SET the inner width for the matched element. This will includes the top and bottom padding and border are always included in the .outerHeight() calculation. If the include Margin argument is set to true, the margin (top and bottom) is also included.
- GET Outer height: It will return the outerHeight for the selected/matched element
- SET Outer height: It will set the outerHeight for the selected/matched element
Syntax
- $(selector).outerHeight()
- $(selector).outerHeight( includeMargin )
- $(selector).outerHeight(value)
- $(selector).outerHeight(value,function(Integer index, Number Width))
| includeMargin | It specify the Boolean value to include the element’s margin in the calculation.
|
| Value | It specify the number of pixels or a number along with an optional unit. |
| function(Integer index,height | A function returning the outer height to set. Get the index position of the element in the set and the old outer height as parameter |
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<style>
.defaultClass {
border: 5px solid #eed5b7;
padding: 10px;
width: 90px;
height: 50px;
margin:10px;
background-color: red;
display: inline-block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.btnClass').click(function () {
$('#divCurrentHeight').text(" Box Height (no padding) : " + $('#divbox1').height());
$('#divOuterHeight').text(" Box Outer Height (with top & bottom padding) : " + $('#divbox2').outerHeight());
$('#divOuterHeightWithMargin').text(" Box Outer Height (Including Margin) : " + $('#divbox2').outerHeight(true));
})
});
</script>
</head>
<body>
<button class="btnClass" id="addMethod">SET/GET OuterHeight() CSS property</button><br /><br />
<div id="divbox1" class="defaultClass">
</div>
<div id="divbox2" class="defaultClass">
</div>
<br /><br />
<div id="divCurrentHeight"></div>
<div id="divOuterHeight"></div>
<div id="divOuterHeightWithMargin"></div>
</body>
</html>
Output:
Here, height of the box is 50. So height() method will return the same as height mentioned as property but outerWidth() method will add the left(10px) , right(10px) padding and border 10(5+5) and return 80 as its outer height.
