.InnerHeight() method in Jquery

Description:

The jQuery innerHeight () method is used to GET/SET the inner height for the matched element. This will includes top and bottom padding but not border/margin.

GET height: It will return the InneHheight for the selected/matched element
SET height: It will set the Innerheight for the selected/matched element

Syntax

$(selector).InnerHeight()
$(selector).InnerHeight(value)
$(selector).InnerHeight(value,function(Integer index, Number height ))

Value	It specify the number of pixels or a number along with an optional unit.
function(Integer index,Number height	A function returning the inner height (including padding but not border) to set. The index will return the position of the element for the matched element and the Previous inner height as arguments.

When calling .innerHeight(“value”), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit.

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;
 background-color: red;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCurrentHeight').text(" Div heigh (no padding) : " + $('#divbox1').height());
 $('#divInnerHeight').text(" Div Inner height (with top & bottom padding) : " + $('#divbox2').innerHeight());
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET width() 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="divInnerHeight"></div>
</body>
</html>

<html>

<head>

<style>

.defaultClass {

border: 5px solid #eed5b7;

padding: 10px;

width: 90px;

height: 50px;

background-color: red;

display: inline-block;

}

</style>

$(document).ready(function () {

$('.btnClass').click(function () {

$('#divCurrentHeight').text(" Div heigh (no padding) : " + $('#divbox1').height());

$('#divInnerHeight').text(" Div Inner height (with top & bottom padding) : " + $('#divbox2').innerHeight());

})

});

</script>

</head>

<body>

<button class="btnClass" id="addMethod">SET/GET width() CSS property</button><br /><br />

</div>

</div>

</body>

</html>

Output:

Here, height of the box is 50. So height() method return the height mentioned in the property(that is 50) but innerHeight() method will add the top(10px) & bottom(10px) with height and return 70 as its innerheight.

.InnerHeight() method in Jquery