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

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.

Inner width of an element
Inner width of an element

Note: The innerwidth() method is not applicable to window and document objects. We use width() 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();
Syntax to get the inner width of an element

  • $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 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 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 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 innerWidth() 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 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);
Using innerWidth() method with a value as a parameter

  • $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 widthBtn is clicked, we call the innerWidth() method to set the inner width of all elements with class  Div as 500 which we send as a parameter. Since we didn't define any units, it will be considered in pixels by default. For myDi1, the width will become 480px while right and left padding will be 10px 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' 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 currentInnerWidth
  return newInnerWidth;
});
Using innerWidth() method with a function as a parameter

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

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved