Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

## .width()Returns: Number

Description: Get the current computed width for the first element in the set of matched elements.

- #### version added: 1.0.width()

  - This method does not accept any arguments.

The difference between `.css(width)` and `.width()` is that the latter returns a unit-less pixel value (for example, `400`) while the former returns a value with units intact (for example, `400px`). The `.width()` method is recommended when an element's width needs to be used in a mathematical calculation.

Figure 1 - Illustration of the measured width

This method is also able to find the width of the window and document.

1 2 3 4 5 |
    // Returns width of browser viewport$( window ).width(); // Returns width of HTML document$( document ).width();

Note that `.width()` will always return the content width, regardless of the value of the CSS `box-sizing` property. As of jQuery 1.8, this may require retrieving the CSS width plus `box-sizing` property and then subtracting any potential border and padding on each element when the element has `box-sizing: border-box`. To avoid this penalty, use `.css( "width" )` rather than `.width()`.

Note: Although `style` and `script` tags will report a value for `.width()` or `height()` when absolutely positioned and given `display:block`, it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.

### Additional Notes:

- The number returned by dimensions-related APIs, including `.width()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
- The value reported by `.width()` is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using `.width()`. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

## Example:

Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>width demo</title>  <style>  body {    background: yellow;  }  button {    font-size: 12px;    margin: 2px;  }  p {    width: 150px;    border: 1px red solid;  }  div {    color: red;    font-weight: bold;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <button id="getp">Get Paragraph Width</button><button id="getd">Get Document Width</button><button id="getw">Get Window Width</button><div>&nbsp;</div><p>  Sample paragraph to test width</p> <script>function showWidth( ele, w ) {  $( "div" ).text( "The width for the " + ele + " is " + w + "px." );}$( "#getp" ).click(function() {  showWidth( "paragraph", $( "p" ).width() );});$( "#getd" ).click(function() {  showWidth( "document", $( document ).width() );});$("#getw").click(function() {  showWidth( "window", $( window ).width() );});</script> </body></html>

#### Demo:

## .width( value )Returns: jQuery

Description: Set the CSS width of each element in the set of matched elements.

- #### version added: 1.0.width( value )

  - value
    Type: String or Number
    An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).

- #### version added: 1.4.1.width( function )

  - function
    Type: Function( Integer index, Integer value ) => String or Number
    A function returning the width to set. Receives the index position of the element in the set and the old width as arguments. Within the function, `this` refers to the current element in the set.

When calling `.width("value")`, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the width (such as `100px`, `50%`, or `auto`). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the `box-sizing` CSS property is used.

If no explicit unit is specified (like "em" or "%") then "px" is assumed.

Note that `.width("value")` sets the content width of the box regardless of the value of the CSS `box-sizing` property.

## Example:

Change the width of each div the first time it is clicked (and change its color).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>width demo</title>  <style>  div {    width: 70px;    height: 50px;    float: left;    margin: 5px;    background: red;    cursor: pointer;  }  .mod {    background: blue;    cursor: default;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <div>d</div><div>d</div><div>d</div><div>d</div><div>d</div> <script>var modWidth = 50;$( "div" ).one( "click", function() {  $( this ).width( modWidth ).addClass( "mod" );  modWidth -= 8;});</script> </body></html>

#### Demo: