jQuery .height() Method

What You’ll Learn

The .height() method gets or sets the height of matched elements as a unitless pixel Number — ideal for math and animations. This tutorial covers getter and setter overloads, comparisons with .css("height"), .width(), .innerHeight(), and .outerHeight(), window and document heights, and practical accordion and bar-chart patterns.

Introduction

After learning to read and write CSS with .css(), you often need a simpler way to work with element dimensions — especially height. jQuery’s .height() returns a plain number you can multiply, add, or pass directly to .animate(), without parsing "80px" strings.

Available since jQuery 1.0, .height() works as both a getter (no arguments) and a setter (value or callback). The getter reads the content height of the first matched element; the setter applies a new height to every element in the set. It also works on $(window) and $(document) for viewport and page measurements.

Understanding the .height() Method

Given a jQuery object, .height() either returns the current content height of the first matched element as a unitless pixel Number (getter), or sets the CSS height property on every matched element (setter). Unlike .css("height"), the getter never returns a string with units — it is ready for arithmetic.

Think of .height() as a specialized ruler for the vertical content box. .innerHeight() extends the ruler through padding; .outerHeight() includes border (and optionally margin). Use .height() when you need clean numbers; reach for .css() when you need percentage heights, auto, or other CSS values.

📝 Syntax

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

Get — no arguments (since 1.0)

.height()  // -> Number

• Returns the content height of the first matched element as a unitless pixel Number.
• Works on elements, $(window), and $(document).
• Equivalent to reading the inner content box — padding and border are excluded.

Set — String or Number (since 1.0)

.height( value )  // -> jQuery

• value — a pixel height as a Number (e.g. 30) or a String with units (e.g. "50%", "10em").
• Numbers are treated as pixels and applied as inline height.
• Returns the original jQuery object for chaining — e.g. .height(30).css("backgroundColor", "green").

Set — callback function (since 1.4.1)

.height( function( index, height ) {
  // return new height (Number or String)
} )

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

Return value

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

Important note

Official jQuery API example

function showHeight( element, height ) {
  $( "div" ).text( "The height for the " + element + " is " + height + "px." );
}
showHeight( "paragraph", $( "p" ).height() );
showHeight( "document", $( document ).height() );
showHeight( "window", $( window ).height() );

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 compare .css(), demonstrate callback setters, and build an accordion. Use DevTools or the Try-it links to run each snippet.

function showHeight( element, height ) {
  $( "#out" ).text( "The height for the " + element + " is " + height + "px." );
}

$( "#getp" ).on( "click", function() {
  showHeight( "paragraph", $( "p" ).height() );
});
$( "#getd" ).on( "click", function() {
  showHeight( "document", $( document ).height() );
});
$( "#getw" ).on( "click", function() {
  showHeight( "window", $( window ).height() );
});

Get Paragraph Height -> "The height for the paragraph is 42px."

Get Document Height -> full scrollable page height in px

Get Window Height -> visible viewport height in px

$( "div" ).one( "click", function() {
  $( this ).height( 30 ).css({
    cursor: "auto",
    backgroundColor: "green"
  });
});

Click orange box -> height shrinks from 70px to 30px

Background turns green; cursor becomes auto

.one() ensures the handler runs only once per box

var $box = $( "#box" );
var lines = [
  '.height()        -> ' + $box.height() + ' (Number, unitless px)',
  '.css("height")   -> ' + $box.css( "height" ) + ' (String with units)',
  'Math: height * 2 -> ' + ( $box.height() * 2 ) + 'px'
];
$( "#out" ).html( lines.join( "<br>" ) );

.height()        -> 80 (Number, unitless px)
.css("height")   -> 80px (String with units)
Math: height * 2 -> 160px

No parseInt needed — multiply the Number directly

$( "#apply" ).on( "click", function() {
  $( ".bar" ).height( function( index ) {
    return 30 + index * 25;
  });
});

Apply -> bar heights: 30px, 55px, 80px, 105px, 130px

Formula: 30 + index * 25 (index 0, 1, 2, 3, 4)

Callback runs once per .bar element

var open = false;
var fullHeight = 0;

$( ".acc-head" ).on( "click", function() {
  var $body = $( ".acc-body" );
  if ( !fullHeight ) {
    $body.css( "height", "auto" );
    fullHeight = $body.height();
    $body.height( 0 );
  }
  open = !open;
  $body.animate({ height: open ? fullHeight : 0 }, 300 );
});

First click -> panel animates from 0 to measured fullHeight

Second click -> animates back to 0

.height() captures natural content size before collapsing

🚀 Common Use Cases

• Responsive layouts — $(window).height() to size full-screen sections or modals to the viewport.
• Scroll progress — $(document).height() vs $(window).scrollTop() for read-progress bars.
• Accordion panels — measure with .height(), animate open/closed with .animate({ height: ... }).
• Equal-height columns — read each column’s .height(), find the max, set all to match.
• Bar charts — callback setter .height(function(i){ return base + i * step; }) for indexed bar heights.
• Dynamic spacing — var h = $el.height(); $next.css("marginTop", h + 10) without string parsing.

📝 Notes

• Available since jQuery 1.0 — core dimension API alongside .width().
• Getter returns a unitless pixel Number from the first matched element only.
• Callback setter since 1.4.1 — function receives (index, height).
• Measures content height — padding and border excluded (unlike .innerHeight() / .outerHeight()).
• box-sizing: border-box affects CSS layout but .height() still reports the inner content box.
• Unreliable on hidden (display:none) elements — may return 0.
• Values can be fractional (e.g. 80.5) on sub-pixel or zoomed displays.
• Setter returns the original jQuery object — e.g. .height(30).css("color","white").

💡 Best Practices