Updated March 20, 2023
Introduction to jQuery outerHeight()
jQuery dimension methods enable users to manipulate dimensions of DOM elements. jQuery outerHeight() method returns the height of an element which includes padding (top and bottom), border, and optionally margin. jQuery outerHeight() is a jQuery method that is basically used for manipulation of DOM elements dimensions such as height, width, offset, position. This method returns the outer height of the first matched element or sets the outer height of every matched Padding and Border both are included in this method and optionally margin this method is applied on an empty set of elements, it returns undefined. This method can not be used for window or document objects. For such cases, the height() method is used.
The following diagram illustrates the different dimensions of an element.
jQuery outerHeight() Methods
Following are the methods:
1. jQuery height() Method
- This method calculates the height of elements excluding border, padding, and margin.
- Gets and sets the height of a given element.
Syntax:
To return the height of an element.
$(selector).height()To set the height of an element.
$(selector).height(value)Where value is a mandatory parameter that specifies height in pixel.
2. jQuery innerHeight() Method
- This method calculates and returns the inner height of the first matched element.
- It includes padding but not border or margin.
Syntax:
$(selector).innerHeight()3. jQuery offset() Method
- This method gets and sets the current coordinates of the specified elements.
- It returns an object containing top and left coordinates for the element.
Syntax:
$(selector).offset()Syntax for jQuery outerHeight():
$(selector).outerHeight(includeMargin)Where includeMargin is an optional parameter. It is a boolean value that specifies whether the margin to be included or not. It has two values.
- False: It is the default value for includeMargin, it specifies the margin not to be included in the calculation.
- True: It specifies the margin to be included in the calculation.
This method can also be used to set the CSS outer height for all matched elements.
Syntax:
$(selector).outerHeight(newHeight )Where, newHeight can be a string, a number or a function that will return the value to be specified as newHeight.
- If the newHeight is a number, jQuery assumes the value with a pixel.
- If the newHeight is a string, any valid CSS unit can be used such as px, auto, %.
Examples of jQuery outerHeight() Method
Given below are the examples of jQueryHeight() method:
Example #1
This is a simple example showing the effect of the jQuery outerHeight() method by simply returning the outerHeight of a div.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.button {
background-color: #d3ff33; border: none;
padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 2px 3px; cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$("#btn").click(function() {
alert("Outer height of div is: " + $("div").outerHeight());
});
});
</script>
</head>
<body>
<div
style="height:100px;width:300px;padding:20px;margin:4px;border:10px rgb(200
, 255, 0);background-color:rgb(182, 228, 255);"
></div>
<br />
<button class="button" id="btn">
Click here to get the outer height of the div
</button>
</body>
</html>Output:
- The below screen is displayed when the page is first loaded in the browser.
- No activity is performed until now.
- After the button is clicked, the below screen comes up with an alert displaying the Outer height of div.
Example #2
This example shows the effect of the outerHeight method including margin.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.button {
background-color: #d3ff33; border: none;
padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 2px 3px; cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$("#btn").click(function() { alert(
"Outer height of div excluding margin is: " +
$("div").outerHeight() + "\n" +
"Outer height of div including margin is: " +
$("div").outerHeight(true)
);
});
});
</script>
</head>
<body>
<div
style="height:100px;width:300px;padding:20px;margin:4px;border:10px rgb(200
, 255, 0);background-color:rgb(182, 228, 255);"
></div>
<br />
<button class="button" id="btn">
Click here to get the outer height of the div
</button>
</body>
</html>Output:
- The below screen gets displayed once the page is first time loaded in the browser.
- Till now, no activity has been performed.
- Once the button is clicked, an alert pops up as shown below in the snapshot.
- This alert is displaying the outer height of the div both excluding and including margin.
Example #3
Let’s take a look at an example demonstrating how to change the inner height of each div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>outerHeight demo</title>
<style> div {
width: 40px; padding: 20px; height: 70px; float: left; margin: 8px;
background: rgb(255, 238, 0); cursor: pointer;
}
.mod {
background: rgb(174, 0, 255); cursor: default;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div>div 5</div>
<script>
var Height_mod = 70;
$("div").one("click", function() {
$(this)
.outerHeight(Height_mod)
.addClass("mod"); Height_mod -= 7;
});
</script>
</body>
</html>Output:
- The below screen gets displayed when the page is first loaded in the browser.
- Till now, no activity has been performed.
- When div 5 is clicked, its height changes along with its color.
- Each div changes its height and its color as they are clicked.
If the element or its parent is hidden, the value returned by the outerHeight() method can not always be accurate. To ensure that the value returned is an accurate one, the element must be visible before using the outerHeight() method.
Conclusion
This article demonstrated the effect of jQuery outerHeight() method and the way it is implemented to manipulate the DOM. This method helps in getting the current computed dimension of a DOM element with or without borders we also tried to understand the basic differences between some of the similar jQuery methods such as height(), innerHeight(), outerHeight() in terms of their effects and implementation.
Recommended Articles
This is a guide to jQuery outerHeight(). Here we discuss the Introduction, syntax, and examples of jQuery outerHeight(). You may also have a look at the following articles to learn more –
