.outerHeight() method in Jquery

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.

False:It specifies noot to include the margin. It is a default value.
True:It specifies to Include the margin.

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>

<html>

<head>

<style>

.defaultClass {

border: 5px solid #eed5b7;

padding: 10px;

width: 90px;

height: 50px;

margin:10px;

background-color: red;

display: inline-block;

}

</style>

$(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>

</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.

.outerHeight() method in Jquery