The jQuery outerWidth() method returns or sets the outer width of the selected element. The value of outer width includes the padding and border of the element you select.
You can also include the margin property with the outer width. Pass a boolean value as a parameter of the method to include the margin
Syntax of jQuery outerWidth() Method
The syntax of this method is given below:-
Description of the Parameters
The description of the parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element class, id, or tag name to select and get or sets the outer width. |
| includeMargin | You have to specify the boolean value to decide whether to include margin or not. If you specify true, it includes the margin with outer width. Also, if you specify false, it will not include the margin with outer width. |
jQuery outerWidth() Method Returns the Value of Outer Width
To get or return the outer width of the selected element, you have to use the method as given below. It returns the outer width that includes the padding and the border of the selected element.
The example contains the button and the div element. The div element contains some width, height, padding, and margin.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mygetwdbtn').click(function(){ var mydivwd = $(".divwd").outerWidth(); alert(mydivwd); }); }); </script> <style> .divwd{ width:100px; height:100px; border:1px solid #ccc; padding:20px; margin:10px; } </style> <button type="button" class="mygetwdbtn">Click to Return Outer Width</button><br><br> <div class="divwd"></div> |
Output
When you click the button above, you will get the outer width in the alert box. This outer width includes the element width, padding, and border of the selected element.
How to Include Margin with Outer Width
To get the outer width including the margin, pass ‘true’ as the parameter of the method. See the example below contains the same elements as given above.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mygetwdbtn1').click(function(){ var mydivwd1 = $(".divwd1").outerWidth(true); alert(mydivwd1); }); }); </script> <style> .divwd1{ width:100px; height:100px; border:1px solid #ccc; padding:20px; margin:10px; } </style> <button type="button" class="mygetwdbtn1">Click to Return Outer Width Including Margin</button><br><br> <div class="divwd1"></div> |
Output
You have to click the button above to get the outer width including the margin. The output displays in the alert box includes the margin of the selected element. The value of the outer width is different from the previous example value.
You may also like to read
I hope you like this tutorial on jQuery outerWidth() method. If you have any queries regarding the tutorial, please comment below.
References