What is jQuery innerWidth() 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 innerWidth() method
The innerWidth() method in jQuery helps us deal with an element's inner width. The inner width of an element is not a CSS property; it is a concept that refers to the sum of the element's width and the horizontal padding (right and left padding if it exists).
The function innerWidth() returns the inner width of the element, excluding its margin and border.
Note: The
innerwidth()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 innerWidth() method
It is used for two purposes:
To get the inner width of the first element in our selected elements
To set the inner width of all elements in our selected elements
Let's discuss each purpose now.
Get the inner width of an element
The innerWidth() method helps us get the inner width of the first element in our selected elements.
Following is the syntax to use the innerWidth() method for the aforementioned purpose.
$(selector).innerWidth();
$selector: The element we want to obtain the inner width of.
Note: When we want to get the inner width of an element, we don't use any parameters in the
innerWidth()method.
Code example
The following code demonstrates how we can use the innerWidth() method to get the inner 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 inner width, we can verify if only width and padding are included.
Note: The
document.ready()function executes after the DOM has loaded completely without making an explicit call.
Lines 28–31: We call the
innerWidth()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 ourinnerWidth()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 inner width of elements
The innerWidth() method helps us set the inner 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 inner width is changed to the newInnerWidth we send as a parameter. Following is the syntax to use the innerWidth() method for the aforementioned purpose.
$(selector).innerWidth(newInnerWidth);
$selector: The element we want to set the inner width for.newInnerWidth: The new inner 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 inner width is considered to have a pixel unit.
Coding example
The following code demonstrates how we can use the innerWidth() method to set the inner width of all selected set of elements using a value as a parameter.
Note: Setting the inner width in jQuery modifies the width of the element only keeping the padding specified in the styling constant.
Let's understand our code.
Lines 29–31: When the button with
id widthBtnis clicked, we call theinnerWidth()method to set the inner width of all elements with classDivas500which we send as a parameter. Since we didn't define any units, it will be considered in pixels by default. FormyDi1, the width will become 480px while right and left padding will be 10px each.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' inner width is changed in the function. We use this way if we want to perform some additional operations or modifications on the current inner width of our selected elements. Below is the syntax to use the innerWidth() method for this purpose.
$(selector).innerWidth(function(currentIndex, currentInnerWidth) {// Performing operations or modifications on currentInnerWidthreturn newInnerWidth;});
$sselector: The element we want to set the inner width for.currentIndex: The current index of the element we want to select within the selected set.currentInnerWidth: The current inner width of the element we want to select within the selected set.newInnerWidth: The new inner width we want to set for our elements. OurinnerWidth()method sets our element's current inner width to the returned value.
Code example
The following code demonstrates how we can use the innerWidth() method to set the inner width of all selected sets of elements using a function as a parameter.
Code explanation
Line 29–34: When the button with
id widthBtnis clicked, we call theinnerWidth()method with a function as a parameter. In this function, we modify thecurrentInnerWidthby adding additional200pixels to each element'scurrentInnerWidthand storing the result innewInnerWidth. ThisnewInnerWidthis returned by the function which sets our elements' inner width to it.
Conclusion
The innerWidth() method allows us to retrieve and manipulate the inner width of HTML elements. It allows us to retrieve and set the inner width of our elements effortlessly.
