JQuery outerHeight() return none-zero on hidden (display:none) element?

Question

I think it should return 0 for display:none elements. but it doesn't, at least for 1.10.1

<div id="a" style="display:none">
    asdf
    asdfasdf<br>
    sadf
</div>

alert($('#a').outerHeight(true))

http://jsfiddle.net/pUuAz/

I think it returns the height of an element irrespective of their display. `display:none` simply hides the element from view, the element is not collapsed. — Selvakumar Arumugam, Aug 08 '13 at 20:19
possible duplicate http://stackoverflow.com/questions/3632120/jquery-height-width-and-displaynone — Venkata Krishna, Aug 08 '13 at 20:30

score 9 · Accepted Answer · answered Dec 04 '13 at 00:49

9

jQuery gives you the height of the element regardless to if it's displayed on the screen.

If you want it to ignore an hidden element use the following:

$('#a').is(':visible') ? $('#a').outerHeight(true) : 0;

answered Dec 04 '13 at 00:49

Adam Tal

5,911
4
29
49

This is just half-true. jQuery will give the height just if the element is directly hidden, but will return ```0``` in case the element set to ```display:none``` is an ancestor of the targeted element (see https://codepen.io/anon/pen/bKQvVN?editors=1111) – Kamafeather Jun 28 '18 at 13:52

score 2 · Answer 2 · answered Aug 08 '13 at 20:32

digging into $.css to $.style to $.cssHooks to $.cssHooks.height.get we see the culprit:

function ( elem, computed, extra ) {
            if ( computed ) {
                // certain elements can have dimension info if we invisibly show them
                // however, it must have a current display style that would benefit from this
                return elem.offsetWidth === 0 && rdisplayswap.test( jQuery.css( elem, "display" ) ) ?
                    jQuery.swap( elem, cssShow, function() {
                        return getWidthOrHeight( elem, name, extra );
                    }) :
                    getWidthOrHeight( elem, name, extra );
            }
}

it seems they swap the style, rip the value, then swap it back to display:none.

JQuery outerHeight() return none-zero on hidden (display:none) element?

2 Answers2