jQuery innerHeight() Method

Quiz

The innerHeight() method in jQuery is used to get the inner width of the first matched element in the set of matched elements, including the padding but not including borders and margins.

This method returns the inner height of the first matched element in pixels as an integer value. If there are no matched elements, it returns undefined.

Syntax

Following is the syntax of the innerHeight() method in jQuery −

$(selector).innerHeight()

Parameters

This method does not accept any parameters.

Example 1

In the following example, we are using the innerHeight() method to return the inner height of the selected element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const innerHeight = $("div").innerHeight();
                alert("Inner height of the element: " + innerHeight);
            });
        });
    </script>   
</head>
<body>
    <div style="height: 60px; width: 150; padding: 20px; border: 2px solid black; background-color: yellow;">
        This is a div element.
    </div>
    <button>Get Inner Height</button>
</body>
</html>

In the above program, the selected element is <div>. When we click the button, the innerHeight() method returns the inner height of that <div> element.

Example 2

Here, we created multiple <div> elements. So, when the innerHeight() method is triggered, it returns the inner height of the first matched div element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const innerHeight = $("#element").innerHeight();
                alert("Inner height of the first selected element: " + innerHeight);
            });
        });
    </script>
</head>
<body>
    <div id="element" style="height: 50; width: 200px; padding: 20px; border: 2px solid black; background-color: yellow;">
        div element (width: 200px padding: 20px)
    </div>
    <div id="element" style="height: 60; width: 250px; padding: 25px; border: 2px solid black; background-color: yellow;">
        div element (width: 250px padding: 25px)
    </div>
    <div id="element" style="height: 70; width: 300px; padding: 30px; border: 2px solid black; background-color: yellow;">
        div element (width: 300px padding: 30px)
    </div>
    <button>Get Inner Height of first selected element.</button>
</body>
</html>

When we click the button, it gives the inner height of the first selected <div> element in the matched set.

jquery_ref_html.htm

Print Page