jQuery .innerWidth() Method

What Is .innerWidth()?

.innerWidth() gets or sets the width of matched elements including padding, but not border or margin (getter since 1.2.6; setter since 1.8). The getter returns a unitless pixel Number.

$("div").innerWidth()        // Number → content + padding
$("div").innerWidth(100)     // set inner width to 100px
$("div").innerWidth(fn)      // per-element setter (1.8+)

.width()       → content only
.innerWidth()  → content + padding
.outerWidth()  → content + padding + border

How to Use .innerWidth()

Measure or set the padded inner box — never on window or document.

1. Select a DOM element (not window or document).
2. Call .innerWidth() with no args to read content + padding as a Number.
3. Pass a Number or CSS string to set that inner width on every match.
4. Use the callback form when each element needs a different value (jQuery 1.8+).

Pseudocode

function innerWidth(selection, value):
    if selection is empty:
        return undefined

    if value is missing:
        el = first matched element
        return contentWidth(el) + horizontalPadding(el)

    for each el in selection:
        if value is a function:
            newW = value(index, currentInnerWidth)
        else:
            newW = value
        set CSS width so content + padding = newW
    return selection

Cheat Sheet

Keep these facts handy while measuring the padded box.

Live Preview

Pick an action against the padded sample box and see what .innerWidth() returns or sets.

$("#box").innerWidth()
→ 136

/* content 120 + padding 8+8 */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var p = $("p").first();

console.log("innerWidth: " + p.innerWidth() + "px");

innerWidth: 310px

(Exact number depends on layout and padding.)

var $box = $("#box");

console.log("width:      " + $box.width());
console.log("innerWidth: " + $box.innerWidth());
console.log("outerWidth: " + $box.outerWidth());

width:      120
innerWidth: 136
outerWidth: 140

$("#box").innerWidth(120);

console.log($("#box").innerWidth());  // 120

120

$(".col").innerWidth(function (index, current) {
  return current - 8;
});

$(".col").each(function (i) {
  console.log("col " + i + ": " + $(this).innerWidth() + "px");
});

col 0: 52px
col 1: 52px
col 2: 52px

(Starts from 60 when each column began at innerWidth 60.)

Performance Notes

Dimension getters force layout. Read once, reuse the Number, and avoid calling .innerWidth() inside tight loops unless needed.

Key Takeaways