Home >>jQuery Tutorial >jQuery outerWidth() Method

jQuery outerWidth() Method

jQuery outerWidth() Method

jQuery outerWidth() method is used to returns the outer width of the FIRST matched element and includes border and padding.

Syntax:
$(selector).outerWidth(includeMargin)

Parameter Values

Parameter Description
includeMargin It is optional parameter and used to specifying a Boolean value whether or not to include the margin
  • false – it Is Default value and does not include the margin
  • true – it includes the margin

<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 width of div is: " + $(".outerWidth").outerWidth());
});
});
</script>
</head>
<body>
<div class="outerWidth" style="height:50px;width:200px;padding:5px;margin:2px;border:1px solid blue;background-color:#4293f5;"></div><br>
<button class="btn1"> Click me to display the outer width</button>
</body>
</html>

Output:


No Sidebar ads