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>
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.
Note: The
width()method and thecss()method in jQuery can both be used to set or get the width of HTML elements. Thewidth()method in jQuery returns the width of an element as a number without units, while thecss()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();
$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
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 we can verify if these properties are excluded in ourwidth()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 classDivwhen 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 ourwidth()function.Lines 35–40: We add two divs with the id
myDiv1andmyDiv2, a button with the idwidthBtn, and a paragraph element with the idwidthResult.
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);
$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
widthBtnis clicked, we call thewidth()method to set the width of all elements with classDivas300, 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
myDiv1andmyDiv2and a button with the idwidthBtn.
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 currentWidthreturn newWidth;});
$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. Ourwidth()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
widthBtnis clicked, we call thewidth()method with a function as a parameter. In this function, we modify thecurrentWidthby adding additional200pixels to each element'scurrentWidthand storing the result innewWidth. ThisnewWidthis 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
