Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery outerHeight() Method
jQuery | outerHeight() Method: Learn about the jQuery outerHeight() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 17, 2022
outerHeight() Method
It is very important to know the dimensions of the element that has been placed on the web page. It includes – height, width, outerWidth, outerHeight, etc. For example, the container created, and the images used should have a proper dimension ratio to make the web page look more professional. That's why we need to know the dimensions over here. So, over here, we'll discuss the outerHeight() method in detail.
The outerHeight() method helps to get the outer height of the selected element. The element whose dimensions have to be known is passed here as a selector, and this method gives the numerical value of the height. The outerHeight() method returns the height including the margin, padding, and border of the element. This method helps return the height of the first matched element.
outerHeight() Method Syntax
$('selector').outerHeight();
$('selector').outerHeight(IncludeMargin);
This method includes one parameter – i.e., include margin or not. It is passed as true or false. If true, then the height is returned including the margin. Otherwise, it does not include the margin. By default, the margin is not included.
The below given example shows how the outerHeight() method returns the height of the selected image that contains – margin, padding, border, etc.
jQuery outerHeight() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
img{
border: 10px solid goldenrod;
padding: 10px;
margin: 15px;
}
</style>
</head>
<body>
<h2>jQuery - Outer Height</h2>
<p>Click the button to get the Outer Height of the image.</p>
<button>Outer Height</button>
<hr>
<img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
<hr>
<h3></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var OutHeight = $('img').outerHeight(true);
$('h3').html('Outer Height of the Image is: ' + OutHeight);
})
});
</script>
</html>
Output:
