jQuery outerWidth() Method

Last Updated:

jQuery outerWidth() Method

The jQuery outerWidth() method gets the outer width (including padding, border, and optionally margin) of the FIRST matched element.

outerWidth() without Margin

In the following example, we will exclude the margin from outer width by leaving the boolean value to default (false).

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> div{ border: 2px solid black; height: 100px; width: 100px; padding: 10px; margin: 10px; } </style> </head> <body> <h1>jQuery outerWidth() Method</h1> <div></div> <p>Click on the button to find the outerWidth of div (include padding and border).</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ alert($("div").outerWidth()); }); }); </script> </body> </html>

Syntax

$(selector).outerWidth(bool);

Parameter Values

ValueTypeExplanation
bool Optional Specifies whether or not to include the margin.
Possible values are
  • false - Default. Do Not include margin.
  • true - Include margin.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
outerWidth()YesYesYesYesYesYesYesYesYesYesYesYesYes

outerWidth() with Margin

In the following example, we will include the margin from outer width by setting the boolean value to true.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> div{ border: 2px solid black; height: 100px; width: 100px; padding: 10px; margin: 10px; } </style> </head> <body> <h1>jQuery outerWidth() Method</h1> <div></div> <p>Click on the button to find the outerWidth of div (include padding, margin and border).</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ alert($("div").outerWidth(true)); }); }); </script> </body> </html>

Share this Page

Meet the Author