.outerWidth() method in Jquery

Description:

The jQuery outerWidth () method is used to GET/SET the outer width for the matched element. This will includes left and right padding but not border/margin.

GET outer Width: It will return the outerWidth for the selected/matched element
SET outer Width: It will set the outerWidth for the selected/matched element

Syntax

$(selector).outerWidth()
$(selector).outerWidth(value,function(Integer index, Number Width))

Margin

It specify the Boolean value to include the element’s margin in the calculation.

False:It specifies noot to include the margin. It is a default value.
True:It specifies to Include the margin.

Value

It specify the number of pixels or a number along with an optional unit.

function(Integer index,width

A function returning the outer width to set. Get the index position of the element in the set and the old outer width as parameter

If includeMargin set to false then the padding and border are included in the calculation; if true then the margin is also included.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 90px;
 height: 50px;
 background-color: red;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCurrentWidth').text(" Box width (no padding) : " + $('#divbox1').width());
 $('#divOuterWidth').text(" Box Outer Width (with top & bottom padding) : " + $('#divbox2').outerWidth(false));
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET OuterWidth() CSS property</button><br /><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <div id="divbox2" class="defaultClass">
 </div>
 <br /><br />
 <div id="divCurrentWidth"></div>
 <div id="divOuterWidth"></div>
</body>
</html>

<html>

<head>

<style>

.defaultClass {

border: 5px solid #eed5b7;

padding: 10px;

width: 90px;

height: 50px;

background-color: red;

display: inline-block;

}

</style>

$(document).ready(function () {

$('.btnClass').click(function () {

$('#divCurrentWidth').text(" Box width (no padding) : " + $('#divbox1').width());

$('#divOuterWidth').text(" Box Outer Width (with top & bottom padding) : " + $('#divbox2').outerWidth(false));

})

});

</script>

</head>

<body>

<button class="btnClass" id="addMethod">SET/GET OuterWidth() CSS property</button><br /><br />

</div>

</div>

</body>

</html>

Output:

Here, width of the box is 90. So width() method will return the same width mentioned the property but innerWidth() method will add the left(10px) , right(10px) padding and include border as well ( 5+5 = 10). S0 it return 120 as its outerWidth.

.outerWidth() method in Jquery