The jQuery innerHeight () method is used to return the inner height of first matched element. It includes padding but not border and margin.
In the above image, you can see that innerHeight () method includes padding but not border and margin.
Syntax:
$(selector).innerHeight()
Let's take an example to demonstrate the effect of jQuery innerHeight() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Inner height of the div is: " + $("div").innerHeight());
});
});
</script>
</head>
<body>
<div style="height:100px;width:500px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>
<button>Click here to get the inner height of the div</button>
</body>
</html>Let's take an example to demonstrate how to change the inner height of each div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>innerHeight demo</title>
<style>
div {
width: 60px;
padding: 10px;
height: 100px;
float: left;
margin: 5px;
background: orange;
cursor: pointer;
}
.mod {
background: green;
cursor: default;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<script>
var modHeight = 80;
$( "div" ).one( "click", function() {
$( this ).innerHeight( modHeight ).addClass( "mod" );
modHeight -= 8;
});
</script>
</body>
</html>
