jQuery .width() Method — Get and Set Element Width

What Is .width()?

.width() gets or sets the content width of matched elements (since jQuery 1.0). The getter returns a unitless pixel Number — ideal for math. It also works on $(window) and $(document).

$("div").width()           // Number  →  content width (px)
$("div").width(100)        // set 100px
$("div").width("50%")      // set with CSS units
$(window).width()          // viewport width
$(document).width()        // full page width

.width()     → Number (unitless)
.css("width") → String ("150px")

How to Use .width()

Pick getter or setter, then choose the box edge you really need.

1. Select the element(s) with jQuery.
2. Call .width() with no args to read a unitless pixel Number.
3. Pass a Number (pixels) or CSS string to set width on every match.
4. Use the callback form when each element needs a different value.

Pseudocode

function width(selection, value):
    if value is missing:
        el = first matched element
        return contentWidth(el) as Number   // no "px"

    for each el in selection:
        if value is a function:
            newW = value(index, currentWidth)
        else:
            newW = value
        set CSS width of el to newW         // Number → pixels
    return selection

Cheat Sheet

Keep these facts handy while measuring horizontal size.

Live Preview

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

$("#box").width()
→ 120

typeof result → "number"

jQuery Examples

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

function showWidth(label, width) {
  console.log(label + ": " + width + "px");
}

showWidth("paragraph", $("p").width());
showWidth("document", $(document).width());
showWidth("window", $(window).width());

paragraph: 150px
document: 900px
window: 720px

(Exact numbers depend on your page and viewport.)

$("#box").width(50);

console.log($("#box").width());  // 50

50

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

console.log($box.width());           // 80  (Number)
console.log($box.css("width"));      // "80px" (String)
console.log($box.width() * 2);       // 160 — ready for math

80
80px
160

$(".bar").width(function (index) {
  return 50 + index * 20;
});

$(".bar").each(function (i) {
  console.log("bar " + i + ": " + $(this).width() + "px");
});
// bar 0: 50px
// bar 1: 70px
// bar 2: 90px

bar 0: 50px
bar 1: 70px
bar 2: 90px

Performance Notes

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

Key Takeaways