# .width()

Categories: CSS | Dimensions | Manipulation > Style Properties

## .width() Returns: Integer

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

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

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.

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

    $(window).width();   // returns width of browser viewport
    $(document).width(); // returns width of HTML document

Note that `.width()` will always return the content width, regardless of the value of the CSS `box-sizing` property.

### 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.

    <!DOCTYPE html>
    <html>
    <head>
      <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="http://code.jquery.com/jquery-1.7rc2.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 )

  valueAn 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(index, width) )

  function(index, width)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 was specified (like 'em' or '%') then "px" is concatenated to the value.

Note that `.width('value')` sets the width of the box in accordance with the CSS `box-sizing` property. Changing this property to `border-box` will cause this function to change the outerWidth of the box instead of the content width.

### Example:

#### To set the width of each div on click to 30px plus a color change.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { width:70px; height:50px; float:left; margin:5px;
            background:red; cursor:pointer; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      <div></div>
      <div>d</div>

      <div>d</div>
      <div>d</div>
      <div>d</div>
    <script>

        $("div").one('click', function () {
          $(this).width(30)
                 .css({cursor:"auto", "background-color":"blue"});
        });
    </script>

    </body>
    </html>

#### Demo: