innerHeight()

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:

snippet
$(selector).innerHeight()

Example of jQuery innerHeight() method

Let's take an example to demonstrate the effect of jQuery innerHeight() method.

snippet
<!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>

jQuery innerHeight() example 2

Let's take an example to demonstrate how to change the inner height of each div.

snippet
<!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>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents