JQuery outerHeight () returns none-zero to a hidden element (display: none)?

Question

I think it should return 0 to display: not a single element. but this is not so, 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/

Answer 1

jQuery gives you the height of the element, regardless of whether it is displayed on the screen.

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

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

Answer 2

digging in $ .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 change the style, copy the value, and then change it to the display: none.