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>
jQuery library

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).

Outer width of an element
Outer width of an element

Note: The outerwidth() method is not applicable to window and document objects. We use width()https://api.jquery.com/width/ 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);
Syntax to get the outer width of an element

  • $selector : The element we want to obtain the outer width of.

  • includeMargin (optional): The boolean variable we set true if we want to include the margin in the outer width. By default, its value is false.

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 title and include the jQuery library in the <head> tag.

  • Lines 9–24: We write the styling for our two divs: myDiv1 and myDiv2. 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 class Div when the button widthBtn is clicked. The first element having this class name will be selected. To verify our results, we set our widthResult text's value to the retrieved value of our outerWidth() function. The parameter in the outerWidth() method means that we want to include margin in our result.

  • Lines 35–40: We add two divs with the id myDiv1 and myDiv2, a button with the id widthBtn, and a paragraph element with the id 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);
Using outerWidth() method with a value as a parameter

  • $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 set true if we want to consider margin inclusive while setting the outer width for the elements. By default, its value is false.

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 widthBtn is clicked, we call the outerWidth() method to set the outer width of all elements with the class  Div as 500, which we send as a parameter. For myDiv1, 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 myDiv1 and myDiv2 and a button with the id 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 currentOuterWidth
  return newOuterWidth;
});
Using outerWidth() method with a function as a parameter

  • $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. Our outerWidth() 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 widthBtn is clicked, we call the outerWidth()  method with a function as a parameter. In this function, we modify the currentOuterWidth by adding additional 200 pixels to each element's currentOuterWidth and storing the result in newOuterWidth. This newOuterWidth is 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

Copyright ©2026 Educative, Inc. All rights reserved