A repository of over 1000 quality jQuery plugins

jQuery .width()

Learn all about the jQuery function .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.

figure 1

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

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