jQuery .height() Method

What Is .height()?

.height() gets or sets the content height 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").height()           // Number  →  content height (px)
$("div").height(100)        // set 100px
$("div").height("50%")      // set with CSS units
$(window).height()          // viewport height
$(document).height()        // full page height

.height()     → Number (unitless)
.css("height") → String ("80px")

How to Use .height()

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

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

Pseudocode

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

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

Cheat Sheet

Keep these facts handy while measuring vertical size.

Live Preview

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

$("#box").height()
→ 60

typeof result → "number"

jQuery Examples

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

function showHeight(label, height) {
  console.log(label + ": " + height + "px");
}

showHeight("paragraph", $("p").height());
showHeight("document", $(document).height());
showHeight("window", $(window).height());

paragraph: 48px
document: 900px
window: 720px

(Exact numbers depend on your page and viewport.)

$("#box").height(30);

console.log($("#box").height());  // 30

30

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

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

80
80px
160

$(".bar").height(function (index) {
  return 30 + index * 25;
});

$(".bar").each(function (i) {
  console.log("bar " + i + ": " + $(this).height() + "px");
});
// bar 0: 30px
// bar 1: 55px
// bar 2: 80px

bar 0: 30px
bar 1: 55px
bar 2: 80px

Performance Notes

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

Key Takeaways