JQuery outerHeight（）在隐藏（显示：无）元素上返回非零？答案

【问题标题】：JQuery outerHeight() return none-zero on hidden (display:none) element?JQuery outerHeight（）在隐藏（显示：无）元素上返回非零？
【发布时间】：2013-08-08 20:15:53
【问题描述】：

我认为它应该为 display:none 元素返回 0。但它没有，至少对于 1.10.1

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

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

http://jsfiddle.net/pUuAz/

【问题讨论】：

我认为它返回元素的高度，而不管它们的显示。 display:none 只是从视图中隐藏元素，元素不会折叠。
可能重复stackoverflow.com/questions/3632120/…

标签： javascript jquery outerheight

【解决方案1】：

jQuery 为您提供元素的高度，无论它是否显示在屏幕上。

如果您希望它忽略隐藏元素，请使用以下内容：

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

【讨论】：

这只是对了一半。 jQuery 会在元素被直接隐藏时给出高度，但如果设置为 display:none 的元素是目标元素的祖先，则会返回 0（参见 codepen.io/anon/pen/bKQvVN?editors=1111）

【解决方案2】：

深入研究 $.css 到 $.style 到 $.cssHooks 到 $.cssHooks.height.get 我们看到了罪魁祸首：

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 );
            }
}

似乎他们交换了样式，撕掉了值，然后将其交换回 display:none。

【讨论】：