Easy To Learn jQuery outerHeight() and Width Methods

jQuery outerHeight() Method

The jQuery outerHeight() method is used to return the outer height of first matched element. This method includes padding and border both.

Syntax

$(selector).offsetParent()

$(selector).outerHeight(includeMargin)

Parameter	Description
includeMargin	This is a Boolean value specifying whether or not to include the margin *false* : Default. Does not include the margin *true* : Includes the margin

<!DOCTYPE html>
<html>
<head>
<title>jQuery outerHeight() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        alert("Box Outer height : " + $("div").outerHeight());
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
.box{ 
background:#F60; 
height:80px; 
width:250px; 
padding:10px; 
border:1px solid #0099da; 
border-radius:4px; 
margin:10px 0px;
}
</style>
</head>
 
<body>
 
<div class="box"></div>
<button type="button" class="btn">Click Here! (outerHeight())</button>
 
</body>
</html>

Output :

jQuery outerWidth() Method

The jQuery outerWidth() method is used to return the outer width of the first matched element with padding and border.

The jQuery outerWidth () method works for both visible and hidden elements.

Syntax

$(selector).outerWidth(includeMargin)

Parameter	Description
includeMargin	It is an optional parameter. It is a Boolean value which specifies whether to include the margin or not. False :It is a default value. It specifies that not to include margin. True :It specifies that include the margin.

<!DOCTYPE html>
<html>
<head>
<title>jQuery outerWidth() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        alert("Box Outer width : " + $("div").outerWidth());
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
.box{ background:#F60; height:80px; width:250px; padding:10px; border:1px solid #0099da; border-radius:4px; margin:10px 0px;}
</style>
</head>
 
<body>
 
<div class="box"></div>
<button type="button" class="btn">Click Here! (outerWidth())</button>
 
</body>
</html>

Output :

jQuery Tutorial