What is jQuery outerWidth() method?
jQuery is a JavaScript library that provides multiple features and tools to handle the HTML document. To use jQuery, we must include its library in the HTML document using the following code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
The outerWidth() method
The outerWidth() method in jQuery helps us deal with an element's outer width. The outer width of an element is not a CSS property; it is a concept that refers to the sum of an element's width, horizontal border, horizontal padding, and horizontal margin (optional).
Note: The
outerwidth()method is not applicable towindowanddocumentobjects. We usewidth()method instead.To study more on the
width()method we can refer to this Answer.
Purpose of the outerWidth() method
It is used for two purposes:
To get the outer width of the first element in our selected elements
To set the outer width of all elements in our selected elements
Let's discuss each purpose now.
Get the outer width of an element
The outerWidth() method helps us get the outer width of the first element in our selected elements.
Following is the syntax to use the outerWidth() method for the aforementioned purpose.
$(selector).outerWidth(includeMargin);
$selector: The element we want to obtain the outer width of.includeMargin(optional): The boolean variable we settrueif we want to include the margin in the outer width. By default, its value isfalse.
Code example
The following code demonstrates how we can use the outerWidth() method to get the outer width of the first element in a selected set of elements.
Code explanation
Lines 4–7: We define the document's
titleand include the jQuery library in the<head>tag.Lines 9–24: We write the styling for our two divs:
myDiv1andmyDiv2. We apply margin, padding, and border for both the divs so when we calculate the outer width, we can verify if these values are present in our result.
Note: The
document.ready()function executes after the DOM has loaded completely without making an explicit call.
Lines 28–31: We call the
outerWidth()method for our elements with the classDivwhen the buttonwidthBtnis clicked. The first element having this class name will be selected. To verify our results, we set ourwidthResulttext's value to the retrieved value of ourouterWidth()function. The parameter in theouterWidth()method means that we want to include margin in our result.Lines 35–40: We add two divs with the
id myDiv1andmyDiv2, a button with theid widthBtn, and a paragraph element with theid widthResult.
Set the outer width of elements
The outerWidth() method helps us set the outer width of multiple elements which match our selector. There are two ways we can use the method to do so.
1. Using a value as a parameter
Here, we send a value as a parameter, and our selected elements' current outer width is changed to the newOuterWidth we send as a parameter. Following is the syntax to use the outerWidth() method for the aforementioned purpose.
$(selector).outerWidth(newOuterWidth);
$selector: The element we want to set the outer width for.newInnerWidth: The new outer width we want to set for all matched elements. It can either be a number or a string containing the units. If we pass a number, the outer width is considered to have a pixel unit.includeMargin(optional): The boolean variable we settrueif we want to consider margin inclusive while setting the outer width for the elements. By default, its value isfalse.
Code example
The following code demonstrates how we can use the outerWidth() method to set the outer width of all selected sets of elements using a value as a parameter.
Note: Setting the outer width in jQuery modifies the width of the element keeping the padding, margin and border constant that was specified in the styling.
Code explanation
Lines 29–31: When the button with
id widthBtnis clicked, we call theouterWidth()method to set the outer width of all elements with the classDivas500,which we send as a parameter. FormyDiv1, the width will become 458px while right padding, left padding, right margin, and left margin will be 10px each. The border on the right and left will be 1px each.Lines 35–39: We add two divs with the
id myDiv1andmyDiv2and a button with theid widthBtn.
2. Using a function as a parameter
Here we send a function as a parameter, and our selected elements' outer width is changed in the function. We use this method if we want to perform some additional operations or modifications on the current outer width of our selected elements. Following is the syntax to use the outerWidth() method for the aforementioned purpose.
$(selector).outerWidth(function(currentIndex, currentOuterWidth) {// Performing operations or modifications on currentOuterWidthreturn newOuterWidth;});
$selector: The element we want to set the outer width for.currentIndex: The current index of the element we want to select within the selected set.currentOuterWidth: The current outer width of the element we want to select within the selected set.newInnerWidth: The new outer width we want to set for our elements. OurouterWidth()method sets our element's current outer width to the returned value.
Code example
The following code demonstrates how we can use the outerWidth() method to set the outer width of all selected sets of elements using a function as a parameter.
Code explanation
Lines 29–34: When the button with the
id widthBtnis clicked, we call theouterWidth()method with a function as a parameter. In this function, we modify thecurrentOuterWidthby adding additional200pixels to each element'scurrentOuterWidthand storing the result innewOuterWidth. ThisnewOuterWidthis returned by the function which sets our elements' outer width to it.
Conclusion
The outerWidth() method allows us to retrieve and manipulate the outer width of HTML elements. It allows us to retrieve and set the outer width of our elements effortlessly.
Free Resources
