What is jQuery width() method?

jQuery is a JavaScript library that provides us with 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 width() method

The width() method in jQuery helps us deal with an element's width property. It is used for two purposes:

  • To get the width of the first element in our selected elements

  • To set the width of all elements in our selected elements

The function width() returns the width of the element excluding its margin, border, and padding.

Width of an element
Width of an element

Note: The width() method and the css() method in jQuery can both be used to set or get the width of HTML elements. The width() method in jQuery returns the width of an element as a number without units, while the css() method returns the width as a string with the unit of measurement included.

Let's discuss each purpose of the width() method now.

Get the width of an element

The width() method helps us get the width of the first element in our selected elements.

Following is the syntax to use the width() method for the aforementioned purpose.

$(selector).width();
Syntax to get the width of an element

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

Note: When we want to get the width of an element, we don't use any parameters in the width() method.

Coding example

The following code demonstrates how we can use the width() method to get the width of the first element in a selected set of elements.

Let's understand our code.

  • 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 we can verify if these properties are excluded in our width() function's result.

Note: The document.ready() function executes after the DOM has loaded completely without making an explicit call.

  • Lines 28–31:  We call the width() method for our elements with class Div when 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 width() function.

  • 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 width of elements

The width() method helps us set the 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 width is changed to the newWidth we send as a parameter. Following is the syntax to use the width() method for the aforementioned purpose.

$(selector).width(newWidth);
Using width() method with a value as a parameter

  • $selector : The element we want to set the width for.

  • newWidth : The new 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 width is considered to have a pixel unit.

Coding example

The following code demonstrates how we can use the width() method to set the width of all selected sets of elements using a value as a parameter.

Let's understand our code.

  • Lines 29–31:  When the button with the id widthBtn is clicked, we call the width() method to set the width of all elements with class  Div as 300, which we send as a parameter. Since we didn't define any units, it will be considered in pixels by default.

  • 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' width is changed in the function. We use this way if we want to perform some additional operations or modifications on the current width of our selected elements. Following is the syntax to use the width() method for the aforementioned purpose.

$(selector).width(function(currentIndex, currentWidth) {
  // Performing operations or modifications on currentWidth
  return newWidth;
});
Using width() method with a function as a parameter

  • $selector : The element we want to set the width for.

  • currentIndex: The current index of the element we want to select within the selected set.

  • currentWidth: The current width of the element we want to select within the selected set.

  • newWidth : The new width we want to set for our elements. Our width() method sets our element's current width to the returned value.

Coding example

The following code demonstrates how we can use the width() method to set the width of all selected sets of elements using a function as a parameter.

Let's understand our code.

  • Lines 29–34: When the button with id widthBtn is clicked, we call the width()  method with a function as a parameter. In this function, we modify the currentWidth by adding additional 200 pixels to each element's currentWidth and storing the result in newWidth. This newWidth is returned by the function which sets our elements' width to it.

Conclusion

The width() method allows us to retrieve and manipulate the width of HTML elements. It allows us to retrieve and set the width of our elements effortlessly.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved