
jQuery Topics
- jQuery Introduction
- jQuery Callbacks
- jQuery deferred
- jQuery selectors
- jQuery Ajax Events
- jQuery Ajax Methods
- jQuery Keyboard Events
- jQuery Keyboard Methods
- jQuery Form Events
- jQuery Form Methods
- jQuery Mouse Events
- jQuery Mouse Methods
- jQuery Event Properties
- jQuery Event Methods
- jQuery HTML
- jQuery CSS
- jQuery Fading
- jQuery Traversing
- jQuery Utilities
- jQuery Properties
jQuery .outerHeight() Method

Photo Credit to CodeToFun
Introduction
jQuery offers a plethora of methods to facilitate DOM manipulation and traversal, and one such method is .outerHeight()
. This method allows you to retrieve the outer height of an element, including its padding, border, and optionally its margin. Understanding how to utilize .outerHeight()
effectively can greatly enhance your ability to control the layout and dimensions of elements on your webpage.
In this guide, we'll explore the intricacies of the jQuery .outerHeight()
method with practical examples to help you grasp its functionality.
Understanding .outerHeight() Method
The .outerHeight()
method in jQuery is used to retrieve the outer height of the first matched element in the set of matched elements, including its padding, border, and optionally its margin.
Syntax
The syntax for the .outerHeight()
method is straightforward:
$(selector).outerHeight([includeMargin])
Parameters:
- selector: A selector expression that matches one or more elements.
- includeMargin (optional): A Boolean value indicating whether to include the margin in the calculation. Default is
false
.
Example
Retrieving Outer Height Without Margin:
Suppose you have a <div> element with some content and padding:
index.htmlCopied<div id="exampleDiv" style="padding: 20px;"> Lorem ipsum dolor sit amet. </div>
You can use
.outerHeight()
to retrieve the total height of the element, including padding and border:example.jsCopiedvar height = $("#exampleDiv").outerHeight(); console.log(height); // Output: 40 (20px padding at the top + 20px padding at the bottom)
Retrieving Outer Height Including Margin:
If you want to include the margin in the calculation, you can pass
true
as an argument to.outerHeight()
:index.htmlCopied<div id="exampleDiv" style="padding: 20px; margin: 10px;"> Lorem ipsum dolor sit amet. </div>
example.jsCopiedvar heightWithMargin = $("#exampleDiv").outerHeight(true); console.log(heightWithMargin); // Output: 60 (20px padding + 20px margin top + 20px margin bottom)
Applying Calculated Height Dynamically:
You can use the
.outerHeight()
method to dynamically adjust the height of elements based on their content or other factors:example.jsCopied$("#exampleDiv").outerHeight($("#otherDiv").outerHeight());
This sets the outer height of #exampleDiv to be the same as the outer height of #otherDiv.
Handling Window Resize Events:
You can utilize
.outerHeight()
in combination with window resize events to dynamically adjust element heights based on viewport changes.example.jsCopied$(window).resize(function() { var newHeight = $("#exampleDiv").outerHeight(); console.log("New height: " + newHeight); });
Conclusion
The jQuery .outerHeight()
method is a valuable tool for retrieving the outer height of elements in a DOM structure, including padding, border, and optionally margin.
By incorporating this method into your web development toolkit, you gain greater control over the layout and dimensions of elements, enabling you to create more dynamic and responsive webpages.
Join our Community:
Author

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (jQuery .outerHeight() Method), please comment here. I will help you immediately.