你需要做元素的父可见的，而你得到元素的尺寸是一个非常短暂的瞬间。在通用解决方案中，通常会遍历所有祖先并使其可见。然后将它们的display值设置回原始值。

当然还有性能问题。

我们认为在执行的Prototype.js这种做法，但结束了getWidth和getHeight 制造只有实际的元素可见，而无需遍历祖先。

替代解决方案的问题——比如从“隐藏”父元素中取出元素——是一旦元素脱离了它的“常规”层次结构，某些样式可能不再适用于该元素。如果你有这样的结构：

<div class="foo" style="display:none;">
  <div class="bar">...</div>
</div>

和这些规则：

.bar { width: 10em; }
.foo .bar { width: 15em; }

那么从其父元素中取出元素实际上会导致错误的尺寸。

如果使用style.display = "none"，元素的宽度和高度将为 0，
但使用style.visibility = "hidden"，元素的宽度和高度将由浏览器计算（与正常情况一样）。

您可以克隆元素，将其绝对定位在 -10000,-10000，测量克隆并销毁它。

制作了一个没有 Jquery 和没有克隆的纯 js 解决方案（我猜这更快）

var getHeight = function(el) {
    var el_style      = window.getComputedStyle(el),
        el_display    = el_style.display,
        el_position   = el_style.position,
        el_visibility = el_style.visibility,
        el_max_height = el_style.maxHeight.replace('px', '').replace('%', ''),

        wanted_height = 0;

    // if its not hidden we just return normal height
    if(el_display !== 'none' && el_max_height !== '0') {
        return el.offsetHeight;
    }

    // the element is hidden so:
    // making the el block so we can meassure its height but still be hidden
    el.style.position   = 'absolute';
    el.style.visibility = 'hidden';
    el.style.display    = 'block';

    wanted_height     = el.offsetHeight;

    // reverting to the original values
    el.style.display    = el_display;
    el.style.position   = el_position;
    el.style.visibility = el_visibility;

    return wanted_height;
}

这是演示 https://jsfiddle.net/xuumzf9k/1/

如果你能找到任何改进，请告诉我（因为我在我的主要项目中使用它）

一种解决方法是height将0

.hidden { 
  height: 0; 
  overflow: hidden; 
}

然后获取元素scrollHeight。

document.querySelector('.hidden').scrollHeight

尽管元素没有出现，scrollHeight 将正确地为您提供高度。我也不认为它会影响元素流。

示例：https : //jsfiddle.net/de3vk8p4/7/
参考：https : //developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Det​​ermining_the_dimensions_of_elements#How_big_is_the_content.3F