jQuery .width() Method

What You’ll Learn

The .width() method gets or sets the width of matched elements as a unitless pixel Number — ideal for math and animations. This tutorial covers getter and setter overloads, comparisons with .css("width"), .height(), .innerWidth(), and .outerWidth(), window and document widths, and practical bar-chart and responsive sidebar patterns.

Introduction

After learning to read and write CSS with .css(), you often need a simpler way to work with element dimensions — especially width. jQuery’s .width() returns a plain number you can multiply, add, or pass directly to .animate(), without parsing "400px" strings.

Available since jQuery 1.0, .width() works as both a getter (no arguments) and a setter (value or callback). The getter reads the content width of the first matched element; the setter applies a new width to every element in the set. It also works on $(window) and $(document) for viewport and page measurements.

Understanding the .width() Method

Given a jQuery object, .width() either returns the current content width of the first matched element as a unitless pixel Number (getter), or sets the CSS width property on every matched element (setter). Unlike .css("width"), the getter never returns a string with units — it is ready for arithmetic.

Think of .width() as a specialized ruler for the horizontal content box. .innerWidth() extends the ruler through padding; .outerWidth() includes border (and optionally margin). Use .width() when you need clean numbers; reach for .css() when you need percentage widths, auto, or other CSS values.

📝 Syntax

jQuery .width() has three argument forms — one getter and two setters:

Get — no arguments (since 1.0)

.width()  // -> Number

• Returns the content width of the first matched element as a unitless pixel Number.
• Works on elements, $(window), and $(document).
• Equivalent to reading the inner content box — padding and border are excluded.

Set — String or Number (since 1.0)

.width( value )  // -> jQuery

• value — a pixel width as a Number (e.g. 50) or a String with units (e.g. "50%", "10em").
• Numbers are treated as pixels and applied as inline width.
• Returns the original jQuery object for chaining — e.g. .width(50).css("backgroundColor", "green").

Set — callback function (since 1.4.1)

.width( function( index, width ) {
  // return new width (Number or String)
} )

• index — zero-based position of the element in the matched set.
• width — current width of this element before the change.
• Return a new width per element; jQuery applies it and returns the jQuery object.

Return value

• Getter — unitless Number (pixels). May be fractional on sub-pixel layouts.
• Setter — the original jQuery object for chaining.

Important note

Official jQuery API example

function showWidth( element, width ) {
  $( "div" ).text( "The width for the " + element + " is " + width + "px." );
}
showWidth( "paragraph", $( "p" ).width() );
showWidth( "document", $( document ).width() );
showWidth( "window", $( window ).width() );

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 compare .css(), demonstrate callback setters, and build a responsive sidebar. Use DevTools or the Try-it links to run each snippet.

function showWidth( element, width ) {
  $( "#out" ).text( "The width for the " + element + " is " + width + "px." );
}

$( "#getp" ).on( "click", function() {
  showWidth( "paragraph", $( "p" ).width() );
});
$( "#getd" ).on( "click", function() {
  showWidth( "document", $( document ).width() );
});
$( "#getw" ).on( "click", function() {
  showWidth( "window", $( window ).width() );
});

Get Paragraph Width -> "The width for the paragraph is 150px."

Get Document Width -> full scrollable page width in px

Get Window Width -> visible viewport width in px

var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});

Click first box -> width shrinks to 50px, turns blue

Click second box -> width 42px; third 34px; and so on

.one() ensures the handler runs only once per box

var $box = $( "#box" );
var lines = [
  '.width()        -> ' + $box.width() + ' (Number, unitless px)',
  '.css("width")   -> ' + $box.css( "width" ) + ' (String with units)',
  'Math: width * 2 -> ' + ( $box.width() * 2 ) + 'px'
];
$( "#out" ).html( lines.join( "<br>" ) );

.width()        -> 400 (Number, unitless px)
.css("width")   -> 400px (String with units)
Math: width * 2 -> 800px

No parseInt needed — multiply the Number directly

$( "#apply" ).on( "click", function() {
  $( ".bar" ).width( function( index ) {
    return 30 + index * 25;
  });
});

Apply -> bar widths: 30px, 55px, 80px, 105px, 130px

Formula: 30 + index * 25 (index 0, 1, 2, 3, 4)

Callback runs once per .bar element

function updateSidebar() {
  var vw = $( window ).width();
  var sidebarW = vw < 768 ? 200 : 280;
  $( "#sidebar" ).width( sidebarW );
  $( "#out" ).text( "Viewport: " + vw + "px -> sidebar: " + sidebarW + "px" );
}
$( window ).on( "resize", updateSidebar );
updateSidebar();

Viewport < 768px -> sidebar width 200px

Viewport >= 768px -> sidebar width 280px

$(window).width() drives the breakpoint logic

🚀 Common Use Cases

• Responsive layouts — $(window).width() to size sidebars, columns, or modals to the viewport.
• Scroll progress — $(document).width() vs $(window).scrollLeft() for horizontal read-progress bars.
• Equal-width columns — read each column’s .width(), find the max, set all to match.
• Horizontal bar charts — callback setter .width(function(i){ return base + i * step; }) for indexed bar widths.
• Slide panels — measure with .width(), animate open/closed with .animate({ width: ... }).
• Dynamic spacing — var w = $el.width(); $next.css("marginLeft", w + 10) without string parsing.

📝 Notes

• Available since jQuery 1.0 — core dimension API alongside .height().
• Getter returns a unitless pixel Number from the first matched element only.
• Callback setter since 1.4.1 — function receives (index, width).
• Measures content width — padding and border excluded (unlike .innerWidth() / .outerWidth()).
• box-sizing: border-box affects CSS layout but .width() still reports the inner content box — jQuery handles this since 1.8.
• Unreliable on hidden (display:none) elements — may return 0.
• Values can be fractional (e.g. 400.5) on sub-pixel or zoomed displays.
• Avoid calling .width() on style or script tags — results are unreliable.
• Setter returns the original jQuery object — e.g. .width(50).css("color","white").

💡 Best Practices