jQuery outerHeight() method

The jQuery outerHeight() method is used to get the computed outer height of an element, including padding, border, and optionally, margin. It allows you to retrieve the total height of an element, including all its visible and invisible parts.

The syntax for using the outerHeight() method is as follows:

$(selector).outerHeight([includeMargin]);

• selector: It is a string that specifies the elements to be selected.
• includeMargin (optional): It is a boolean value (true or false) that indicates whether to include the margin in the calculation. By default, it is set to false, meaning the margin is not included. If you want to include the margin, set it to true.

Here’s an example of how you can use the outerHeight() method:

HTML:

<div id="myDiv" style="width: 200px; height: 100px; padding: 10px; border: 2px solid black; margin: 5px;"></div>

JavaScript:

// Get the outer height of the div element (without margin)
var height = $('#myDiv').outerHeight();
console.log('Outer Height (without margin): ' + height + ' pixels');

// Get the outer height of the div element (including margin)
var heightWithMargin = $('#myDiv').outerHeight(true);
console.log('Outer Height (including margin): ' + heightWithMargin + ' pixels');

In the above example, the outerHeight() method is used to get the outer height of the div element with the ID “myDiv” in two ways: without including the margin and with the margin included. The heights are then logged to the console.

The first outerHeight() call will log the outer height of the element without the margin, which includes the height (100px), padding (10px), and border (2px) but excludes the margin. The result will be 100 + 10 + 2 = 112 pixels.

The second outerHeight(true) call will log the outer height of the element, including the margin. It includes the height (100px), padding (10px), border (2px), and the margin (5px). The result will be 100 + 10 + 2 + 5 = 117 pixels.

The outerHeight() method is useful when you need to calculate the total visible height of an element, considering its padding, border, and optional margin. It is often used to dynamically adjust the layout or positioning of elements on a web page.