jQuery outsideHeight()

The outsideHeight() method in jQuery is used to calculate the total height of an element, including its padding, border, and margin.

Syntax

$(selector).outsideHeight(includeMargin);

• selector: Specifies the selector to select the desired element.
• includeMargin: (Optional) Specifies whether to include margin in the height calculation. Default is false.

Return Value

The outsideHeight() method returns the total height of the selected element, including padding, border, and optionally margin, as an integer value.

Examples

Example 1: Basic outsideHeight()

// HTML
<div id="myElement" style="height: 100px; padding: 10px; border: 2px solid; margin: 5px;"></div>

// jQuery
var elementHeight = $("#myElement").outsideHeight();
console.log(elementHeight); // Output: 124

In the above example, the outsideHeight() method calculates the total height of the element including its padding (20 pixels), border (4 pixels), and without margin (0 pixels). The result is 124 pixels.

Example 2: outsideHeight() with Margin

// HTML
<div id="myElement" style="height: 100px; padding: 10px; border: 2px solid; margin: 5px;"></div>

// jQuery
var elementHeight = $("#myElement").outsideHeight(true);
console.log(elementHeight); // Output: 134

In this example, by passing true as an argument to outsideHeight(), the margin is also included in the height calculation. So, the total height becomes 134 pixels.

Conclusion

The outsideHeight() method in jQuery is a useful tool to calculate the total height of an element, including its padding, border, and margin. It provides a convenient way to retrieve the calculated height of an element for further manipulation or comparison.