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:


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.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.