jQuery .outerHeight(): Learn to Get the Outer Height of an Element

jQuery outerHeight: Main Tips

• The .outerHeight() jQuery method returns the outer height of the first matched element.
• By including relevant parameters, use jQuery .outerHeight() to set the outer height.
• To learn more about jQuery height and width methods, read this tutorial.

Understanding and Using .outerHeight

By using .outerHeight(), you can make jQuery get element height including padding and border. Use the method to set CSS outer height for all matched elements as well.

Note: you can also specify whether you want the outer height to include margin.

The example below shows both possible functionalities of the jQuery .outerHeight(). After you click the button, the height of the element is displayed in an alert. Close it to see the element height change:

$("button").click(() => {
    alert($("p").outerHeight());
});

$("button").click(() => {
    $("p").outerHeight(40);
});

To make jQuery get element height, follow this syntax:

$(selector).outerHeight(margin);

The optional parameter margin defines whether the outer height includes the margin. It has a boolean value (false by default).

To set the outer height, the syntax is as follows:

$(selector).outerHeight(newHeight);

You may use a string, a number, or a function returning the value needed to specify the newHeight.