Home >>jQuery Tutorial >jQuery outerHeight() Method

jQuery outerHeight() Method

jQuery outerHeight() Method

The outerHeight() method in jQuery is used to returns the outer height of the FIRST matched element and includes border and padding.

Syntax:
$(selector).outerHeight(includeMargin)

Parameter Values

Parameter Description
includeMargin It is optional and is used to specifying a Boolean value whether or not to include the margin
  • false – it is Default value and it does not include the margin
  • true – it includes the margin
Here is an Example of jQuery outerHeight() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
alert("Outer height of div is: " + $(".outerDiv").outerHeight());
});
});
</script>
</head>
<body>
<div class="outerDiv" style="height:50px;width:200px;padding:15px;margin:2px;border:1px solid blue;background-color:#4293f5;"></div><br>
<button class="btn1">click me to display the outer height</button>
</body>
</html>

Output: