How to Get Hidden Element Dimensions in jQuery

Retrieving the width and height of an HTML element hidden with display: none is a common challenge because browsers do not render elements removed from the layout flow, causing standard jQuery dimension methods to return 0. This guide explains how to accurately measure the true width and height of hidden elements using temporary CSS property switching and DOM cloning techniques.

Why jQuery Returns Zero

When an element has display: none, it is completely omitted from the document's rendering tree. Because it occupies no physical space on the screen, calling jQuery methods like .width(), .height(), .outerWidth(), or .outerHeight() will return 0.

To obtain actual measurements, the element must be given a display state that the browser can calculate, while remaining invisible to the user.

Method 1: Temporarily Toggling Visibility and Position

The most efficient way to measure a hidden element is to temporarily override its CSS properties. By setting visibility: hidden and position: absolute, the browser calculates its box model without showing it to the user or disrupting surrounding page content.

function getHiddenDimensions($element) {
    // Save original styles
    var originalStyles = {
        position: $element.css('position'),
        visibility: $element.css('visibility'),
        display: $element.css('display')
    };

    // Apply temporary styles to allow dimension calculation
    $element.css({
        position: 'absolute',
        visibility: 'hidden',
        display: 'block'
    });

    // Measure dimensions
    var dimensions = {
        width: $element.outerWidth(),
        height: $element.outerHeight()
    };

    // Revert back to original styles
    $element.css(originalStyles);

    return dimensions;
}

// Usage:
var dims = getHiddenDimensions($('#my-hidden-div'));
console.log('Width: ' + dims.width + ', Height: ' + dims.height);

Method 2: Cloning the Element

If modifying the original element directly causes unintended side effects—such as triggering CSS transitions or affecting complex animations—you can clone the element off-screen, measure it, and remove the clone immediately.

function getClonedDimensions($element) {
    // Clone the element and make it invisible off-screen
    var $clone = $element.clone().css({
        position: 'absolute',
        left: '-9999px',
        top: '-9999px',
        display: 'block',
        visibility: 'hidden'
    });

    // Append to body to calculate styles
    $('body').append($clone);

    // Get measurements
    var dimensions = {
        width: $clone.outerWidth(),
        height: $clone.outerHeight()
    };

    // Clean up the DOM
    $clone.remove();

    return dimensions;
}

// Usage:
var dims = getClonedDimensions($('#my-hidden-div'));
console.log('Width: ' + dims.width + ', Height: ' + dims.height);

Method 3: Extending jQuery with a Custom Plugin

For recurring use across a codebase, encapsulate the logic into a reusable jQuery plugin:

(function($) {
    $.fn.actualDimensions = function() {
        var $el = this.first();
        
        // If already visible, return standard outer measurements
        if ($el.is(':visible')) {
            return {
                width: $el.outerWidth(),
                height: $el.outerHeight()
            };
        }

        var prevStyles = {
            display: $el.css('display'),
            visibility: $el.css('visibility'),
            position: $el.css('position')
        };

        $el.css({
            display: 'block',
            visibility: 'hidden',
            position: 'absolute'
        });

        var dimensions = {
            width: $el.outerWidth(),
            height: $el.outerHeight()
        };

        $el.css(prevStyles);

        return dimensions;
    };
})(jQuery);

// Usage:
var size = $('#my-hidden-div').actualDimensions();
console.log(size.width, size.height);

Key Considerations

Nested Hidden Elements: If an element is hidden because its parent has display: none, toggling the child element alone will not work. In that scenario, use Method 2 (cloning and appending directly to the body).
Fixed vs. Fluid Widths: If an element relies on percentage-based widths from a parent container, cloning it directly to the body may produce inaccurate width measurements. For responsive containers, ensure the temporary container matches the target parent's width.