Get Height of Display None Element in jQuery

Retrieving the dimensions of an element styled with display: none in jQuery typically returns zero because the browser does not calculate layout properties for elements removed from the visual flow. To accurately measure the height of a hidden element, you must temporarily make it measurable without causing visual flickering or shifting the surrounding layout. This guide outlines the standard CSS-swapping workaround and an alternative cloning approach to calculate the height reliably.

The Problem

When an element has display: none, or is inside a hidden parent, it has no computed layout footprint. Calling $(element).height() or $(element).outerHeight() evaluates to 0.

The Temporary Visibility Workaround

The most effective method is to briefly alter the element’s CSS properties so the browser renders its box model while keeping it invisible to the user. This involves setting visibility: hidden and position: absolute, switching display to a measurable state (like block), capturing the height, and immediately reverting the styles.

function getHiddenHeight(selector) {
    var $el = $(selector);

    // Save previous styles to restore later
    var previousStyles = {
        position: $el.css('position'),
        visibility: $el.css('visibility'),
        display: $el.css('display')
    };

    // Apply temporary styles to force layout calculation
    $el.css({
        position: 'absolute',
        visibility: 'hidden',
        display: 'block'
    });

    // Capture the calculated height
    var height = $el.outerHeight();

    // Revert to original styling
    $el.css(previousStyles);

    return height;
}

// Example usage:
var height = getHiddenHeight('#my-hidden-div');
console.log(height);

Why This Technique Works

1. display: block (or inline-block): Forces the browser engine to place the element in the render tree and calculate its dimensions.
2. visibility: hidden: Ensures the contents remain invisible to the user during measurement.
3. position: absolute: Takes the element out of the standard document flow so it does not displace other DOM elements or cause visible page reflows.
4. Instant Restoration: Because JavaScript executes synchronously, the style changes and restoration occur before the browser re-paints the screen, eliminating visual flicker.

Handling Hidden Parent Elements

If the target element is hidden because one of its ancestor containers has display: none, altering the target element directly will still return 0. In this scenario, clone the element, place it off-screen, calculate the height, and remove it immediately:

function getClonedHiddenHeight(selector) {
    var $clone = $(selector).clone();

    $clone.css({
        position: 'absolute',
        left: '-9999px',
        top: '-9999px',
        visibility: 'hidden',
        display: 'block'
    }).appendTo('body');

    var height = $clone.outerHeight();

    $clone.remove();

    return height;
}

// Example usage:
var height = getClonedHiddenHeight('#deeply-nested-hidden-element');
console.log(height);

Ensure that the cloned element does not depend on dynamic parent-width constraints, as rendering inside body may alter its wrapped line breaks and resulting height if responsive CSS applies.