{"name":"width","type":"method","title":".width()","deprecated":null,"removed":null,"desc":"Get the current computed width for the first element in the set of matched elements or set the width of every matched element.","categories":["css","dimensions","manipulation/style-properties","version/1.0","version/1.4.1"],"entries":[{"return":"Number","signatures":{"added":"1.0"},"examples":{"desc":"Show various widths.  Note the values are from the iframe so might be smaller than you expected.  The yellow highlight shows the iframe body.","code":"\nfunction showWidth( ele, w ) {\n  $( \"div\" ).text( \"The width for the \" + ele + \" is \" + w + \"px.\" );\n}\n$( \"#getp\" ).click(function() {\n  showWidth( \"paragraph\", $( \"p\" ).width() );\n});\n$( \"#getd\" ).click(function() {\n  showWidth( \"document\", $( document ).width() );\n});\n$(\"#getw\").click(function() {\n  showWidth( \"window\", $( window ).width() );\n});\n","css":"\n  body {\n    background: yellow;\n  }\n  button {\n    font-size: 12px;\n    margin: 2px;\n  }\n  p {\n    width: 150px;\n    border: 1px red solid;\n  }\n  div {\n    color: red;\n    font-weight: bold;\n  }\n","html":"\n<button id=\"getp\">Get Paragraph Width</button>\n<button id=\"getd\">Get Document Width</button>\n<button id=\"getw\">Get Window Width</button>\n<div>&nbsp;</div>\n<p>\n  Sample paragraph to test width\n</p>\n"},"desc":"Get the current computed width for the first element in the set of matched elements.","longdesc":"\n      <p>The difference between <code>.css(width)</code> and <code>.width()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.width()</code> method is recommended when an element's width needs to be used in a mathematical calculation.</p>\n      <p class=\"image\">\n        <img src=\"/resources/0042_04_04.png\"/>\n      </p>\n      <p>This method is also able to find the width of the window and document.</p>\n      <pre><code>\n// Returns width of browser viewport\n$( window ).width();\n\n// Returns width of HTML document\n$( document ).width();\n      </code></pre>\n      <p>Note that <code>.width()</code> will always return the content width, regardless of the value of the CSS <code>box-sizing</code> property. As of jQuery 1.8, this may require retrieving the CSS width plus <code>box-sizing</code> property and then subtracting any potential border and padding on each element when the element has <code>box-sizing: border-box</code>. To avoid this penalty, use <code>.css( \"width\" )</code> rather than <code>.width()</code>.</p>\n    "},{"return":"jQuery","signatures":[{"added":"1.0","argument":{"type":[{"name":"String"},{"name":"Number"}],"desc":"An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).","name":"value"}},{"added":"1.4.1","argument":{"desc":"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, <code>this</code> refers to the current element in the set.","name":"function(index, width)","type":"Function"}}],"examples":{"desc":"Change the width of each div the first time it is clicked (and change its color).","code":"\nvar modWidth = 50;\n$( \"div\" ).one( \"click\", function() {\n  $( this ).width( modWidth ).addClass( \"mod\" );\n  modWidth -= 8;\n});\n","css":"\n  div {\n    width: 70px;\n    height: 50px;\n    float: left;\n    margin: 5px;\n    background: red;\n    cursor: pointer;\n  }\n  .mod {\n    background: blue;\n    cursor: default;\n  }\n","html":"\n<div>d</div>\n<div>d</div>\n<div>d</div>\n<div>d</div>\n<div>d</div>\n"},"desc":"Set the CSS width of each element in the set of matched elements.","longdesc":"\n      <p>When calling <code>.width(\"value\")</code>, 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 <code>100px</code>, <code>50%</code>, or <code>auto</code>). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the <code>box-sizing</code> CSS property is used.</p>\n      <p>If no explicit unit is specified (like \"em\" or \"%\") then \"px\" is assumed.</p>\n      <p>Note that <code>.width(\"value\")</code> sets the content width of the box regardless of the value of the CSS <code>box-sizing</code> property.</p>\n    "}]}