jQuery .innerWidth() Method

What You’ll Learn

The .innerWidth() method gets or sets the width of matched elements including padding as a unitless pixel Number — ideal when the padded inner box matters for horizontal scroll areas and layout math. This tutorial covers getter and setter overloads, comparisons with .width(), .outerWidth(), and .css("width"), callback setters since 1.8, and practical horizontal scroll-track patterns.

Introduction

After learning .width(), which measures the content box only, you often need a dimension that includes padding — especially for horizontal scroll tracks, tag lists, and comparisons with CSS clientWidth. jQuery’s .innerWidth() returns a plain number for the content area plus horizontal padding, ready for math and .animate() without parsing "144px" strings.

Available since jQuery 1.2.6 as a getter, .innerWidth() gained setter and callback forms in jQuery 1.8. The getter reads the padded inner width of the first matched element; the setter adjusts CSS width so the inner box (content plus padding) matches your target. Unlike .width(), it does not work on $(window) or $(document) — use it on DOM elements only.

Understanding the .innerWidth() Method

Given a jQuery object, .innerWidth() either returns the current width of the first matched element — content plus horizontal padding — as a unitless pixel Number (getter), or sets the CSS width on every matched element so the inner box equals your value (setter). Border and margin are excluded; only padding is added on top of content width.

Think of .innerWidth() as a ruler that extends through left and right padding. .width() stops at the content edge; .outerWidth() continues through border (and optionally margin). Use .innerWidth() when scrollable areas or padded containers need precise pixel targets — for example, fitting a horizontal track to the remaining space beside a fixed label.

📝 Syntax

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

Get — no arguments (since 1.2.6)

.innerWidth()  // -> Number

• Returns the width of the first matched element including padding as a unitless pixel Number.
• Border and margin are excluded — horizontal padding is included.
• Not for $(window) or $(document) — elements only.
• Returns undefined when the jQuery set is empty.

Set — Number (since 1.8)

.innerWidth( value )  // -> jQuery

• value — target inner width in pixels as a Number (e.g. 120).
• jQuery adjusts the CSS width so content plus padding equals the value.
• Returns the original jQuery object for chaining — e.g. .innerWidth(120).addClass("mod").

Set — callback function (since 1.8)

.innerWidth( function( index, width ) {
  // return new inner width (Number)
} )

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

Return value

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

Important note

Official jQuery API example

var p = $( "p" ).first();
$( "#result" ).text( "innerWidth: " + p.innerWidth() + "px" );

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 compare dimension methods, demonstrate callback setters, and build a horizontal scroll track. Use DevTools or the Try-it links to run each snippet.

var p = $( "p" ).first();
$( "#result" ).text( "innerWidth: " + p.innerWidth() + "px" );

innerWidth: 52px (example — content + 5px left/right padding)
Getter returns unitless Number from first matched <p> only
Border on the paragraph is excluded from the count

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

1st click -> innerWidth set to 60px, box turns blue (.mod)
2nd click -> innerWidth set to 52px
3rd -> 44px, 4th -> 36px, 5th -> 28px (modWidth -= 8 each time)
.one() ensures each box handler runs only once

var $box = $( "#box" );
var lines = [
  ".width()       → " + $box.width() + "px (content only)",
  ".innerWidth()  → " + $box.innerWidth() + "px (content + padding)",
  ".outerWidth()  → " + $box.outerWidth() + "px (content + padding + border)"
];
$( "#out" ).html( lines.join( "<br>" ) );

.width()       → ~120px (content only)
.innerWidth()  → ~144px (content + 12px padding left/right)
.outerWidth()  → ~152px (inner + 4px border left/right)
Each step adds one layer of the CSS box model

function showVal() {
  $( "#val" ).text( $( "#panel" ).innerWidth() + "px" );
}
showVal();
$( "#panel" ).on( "click", function() {
  $( this ).innerWidth( function( index, width ) {
    return Math.max( 80, width - 15 );
  });
  showVal();
});

Initial innerWidth displayed in #val
Each click -> innerWidth decreases by 15px
Stops shrinking at 80px minimum (Math.max)
Callback receives current inner width before each change

function fitTrack() {
  var rowW = $( "#row" ).innerWidth();
  var labelW = $( "#label" ).outerWidth( true );
  $( "#track" ).innerWidth( Math.max( 120, rowW - labelW ) );
}
fitTrack();
$( window ).on( "resize", fitTrack );

Track innerWidth = row innerWidth - label outerWidth(true)
Tag chips scroll horizontally inside #track with overflow-x: auto
Resize browser -> fitTrack() recalculates on window resize
Uses .innerWidth() on row/track, .outerWidth(true) on label for margin

🚀 Common Use Cases

• Horizontal scroll tracks — $("#track").innerWidth(rowW - labelW) to fill remaining row space with a scroll area.
• Padded card sizing — when CSS padding is fixed, .innerWidth() targets the visible inner box including that padding.
• Dimension debugging — compare .width(), .innerWidth(), and .outerWidth() to trace box-model mismatches.
• Shrink-on-click UI — callback setter .innerWidth(function(i, w){ return w - 15; }) for interactive panels.
• Equal inner widths — read each card’s .innerWidth(), find the max, set all to match padded columns.
• Animation targets — pair measured .innerWidth() with .animate() when padding must stay inside the animated box.

📝 Notes

• Getter available since jQuery 1.2.6 — setter and callback since 1.8.
• Getter returns a unitless pixel Number from the first matched element only.
• Includes horizontal padding — border and margin excluded.
• Not for $(window) or $(document) — use .width() on those instead.
• Empty jQuery set → getter returns undefined.
• Unreliable on hidden (display:none) elements — may return 0.
• Values can be fractional (e.g. 142.5) on sub-pixel or zoomed displays.
• Setter returns the original jQuery object — e.g. .innerWidth(120).addClass("mod").

💡 Best Practices