Introduction:

In this article we will learn how to get inner Height of html elements or how to use innerHeight() method in jQuery with example.

Description:

jQuery innerHeight() method is used to return/get the inner height of the first matched

element without including border and margin.

This method includes padding but excludes border and margin.

In the above image, you can see that innerHeight() method includes padding but not border and margin.

Syntax:

$(selector).innerHeight()  

Example of jQuery innerHeight() method

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
 </script> 
<script type="text/javascript">
   $(document).ready(function () {
       $("button").click(function () {
       $("#divHeight").html("Inner Height of div is: " + $("#Main").innerHeight());
       });
   });
</script>
</head>
<body>
   <div id="Main" style="height:100px;width:400px;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> 
   <div id="divHeight"></div>
</body>
</html>

Output:

use jQuery innerHeight()

Above code snippet when we click on button then it will show above div id=”main”

innerHeight inside div id=”divHeight”.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like