jQuery outerHeight() Method

Quiz

The outerHeight() method in jQuery is used to get the outer height of the first matched element in a jQuery object. It calculates the total height of the element, including its padding and border, and optionally includes the margin if specified.

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 outerHeight() method in jQuery −

$(selector).outerHeight(includeMargin)

Parameters

This method accepts the following parameters:

selector: A selector expression to find the element(s) whose outer height is to be retrieved.
includeMargin (optional): A boolean value indicating whether to include the element's margin. Default is false. If true, it includes the margin.

Example 1

In the following example, we are using the outerHeight() method to return the outer height of the selected element (<div>) −

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

When we click the button, it returns the outer height of the <div> element.

Example 2

In this example, we have multiple <div>>elements. So, when the outerHeight() method is triggered, it returns the outer 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 outerHeight = $("#element").outerHeight();
                alert("Outer height of the first selected element: " + outerHeight);
            });
        });
    </script>
</head>
<body>
    <div id="element" style="height: 50; width: 200px; padding: 20px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 200px padding: 20px)
    </div>
    <div id="element" style="height: 60; width: 250px; padding: 25px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 250px padding: 25px)
    </div>
    <div id="element" style="height: 70; width: 300px; padding: 30px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 300px padding: 30px)
    </div>
    <button>Get Outer Height of first selected element.</button>
</body>
</html>

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

Example 3

Here, we are passing true as an argument to the outerHeight() method to include the margin in the outer height −

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

If we execute the above program, it returns the outer height of the <div> element including the margin.

jquery_ref_html.htm

Print Page