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.

 Syntax:

$(selector).innerHeight()

Let’s see, Example of jQuery innerHeight() method:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery innerHeight method</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.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>


 Let's check live example

0 comments


Leave a comment

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

You may also like