jQuery width() height() innerWidth() outerWidth()

jQuery provides several methods to measure and set the size of elements. These methods handle the complexity of CSS box model calculations so you do not have to compute padding, border, and margin manually.

The CSS Box Model — Quick Recap

  ┌─────────────────────────────────────────┐  ← outerWidth(true) includes margin
  │              MARGIN                     │
  │  ┌───────────────────────────────────┐  │  ← outerWidth() includes border
  │  │            BORDER                 │  │
  │  │  ┌─────────────────────────────┐  │  │  ← innerWidth() includes padding
  │  │  │          PADDING            │  │  │
  │  │  │  ┌───────────────────────┐  │  │  │  ← width() is the content only
  │  │  │  │     CONTENT AREA      │  │  │  │
  │  │  │  └───────────────────────┘  │  │  │
  │  │  └─────────────────────────────┘  │  │
  │  └───────────────────────────────────┘  │
  └─────────────────────────────────────────┘

width() and height() — Content Area Only

These return the dimensions of the content area, excluding padding, border, and margin.

// Get width and height
var w = $("#box").width();    // e.g. 300
var h = $("#box").height();   // e.g. 150

// Set width and height
$("#box").width(400);
$("#box").height(200);
$("#box").width("50%");       // percentage works too

innerWidth() and innerHeight() — Content + Padding

These include the content area plus any padding on both sides.

// If #box has: width:300px, padding:20px on each side
$("#box").width()       // → 300   (content only)
$("#box").innerWidth()  // → 340   (300 + 20 + 20 padding)

outerWidth() and outerHeight() — Content + Padding + Border

These include content, padding, and border. Pass true to also include margin.

// If #box has: width:300px, padding:20px, border:5px, margin:10px
$("#box").outerWidth()        // → 350   (300 + 20+20 padding + 5+5 border)
$("#box").outerWidth(true)    // → 370   (350 + 10+10 margin)

Comparison Table

Getting Window and Document Dimensions

// Visible area of the browser window
var winW = $(window).width();
var winH = $(window).height();

// Total scrollable page size
var docW = $(document).width();
var docH = $(document).height();

Practical: Center an Element on Screen

$(document).ready(function() {
    function centerModal() {
        var winW   = $(window).width();
        var winH   = $(window).height();
        var modalW = $("#modal").outerWidth();
        var modalH = $("#modal").outerHeight();

        var left = (winW - modalW) / 2;
        var top  = (winH - modalH) / 2;

        $("#modal").css({ left: left + "px", top: top + "px" });
    }

    centerModal();
    $(window).resize(centerModal);   // re-center on window resize
});

Diagram: Centering Calculation

  Browser window: 1200px wide, 800px tall
  Modal: 400px wide, 300px tall

  left = (1200 - 400) / 2 = 400px from left
  top  = (800  - 300) / 2 = 250px from top

  Modal appears perfectly centred.

Practical: Equal Height Columns

$(document).ready(function() {
    var maxH = 0;
    $(".column").each(function() {
        if ($(this).height() > maxH) {
            maxH = $(this).height();
        }
    });
    $(".column").height(maxH);   // set all columns to the tallest one
});

Setting Size with width() and height()

// Set using pixels
$("#box").width(300).height(150);

// Set using string with unit
$("#box").width("80%");

// Set using a function
$(".card").width(function(index, currentWidth) {
    return currentWidth + 50;   // each card grows 50px wider
});

Quick Summary

• width() / height() — content area only.
• innerWidth() / innerHeight() — content + padding.
• outerWidth() / outerHeight() — content + padding + border.
• outerWidth(true) — adds margin to the total.
• All methods work as getters (no argument) and setters (with argument).
• Use $(window).width() and $(window).height() for viewport size.

Responsive Resize Listener

Re-run layout calculations whenever the browser window resizes. This keeps dynamic measurements accurate on all screen sizes.

$(window).on("resize", function() {
    var currentW = $(window).width();
    if (currentW < 768) {
        $(".sidebar").hide();
    } else {
        $(".sidebar").show();
    }
});

Comparing Element Width to Container

Use width measurements to detect overflow — for example, when text or an image is wider than its container. This lets you apply a responsive fix in JavaScript when CSS alone is not enough.

$(document).ready(function() {
    $(".content-block").each(function() {
        var containerW = $(this).parent().width();
        var blockW     = $(this).outerWidth(true);
        if (blockW > containerW) {
            $(this).addClass("overflow-detected");
            console.log("Overflow in:", $(this).attr("id"));
        }
    });
});

Any content block wider than its parent gets an overflow-detected class, which CSS can then style — such as applying overflow-x: auto or reducing font size.