需要在页面上查找隐藏分区的高度(设置为显示:无)

你需要 使元素的父级可见 当你得到元素的尺寸时,这一刻非常短暂。在通用解决方案中,通常遍历所有祖先并使其可见。然后他们的 display 值被设置回原始值。

当然还有性能方面的问题。

我们在prototype.js实现中考虑了这种方法,但最终 getWidth 和 getHeight 仅使实际元素可见 没有穿越祖先。

另一种解决方案的问题是,一旦某个元素脱离了其“常规”层次结构,某些样式就可能不再应用于该元素,例如将其从“隐藏”父元素中删除。如果您有这样的结构:

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

以及这些规则:

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

然后将元素从其父元素中取出实际上会导致错误的维度。

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

做了一个纯JS解决方案,没有jquery,也没有克隆(我想更快)

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/

请告诉我,如果你能找到任何改进(因为我在我的主要项目中使用这个)

如果你使用 style.display = "none" ,元素的宽度和高度为0,
但是使用 style.visibility = "hidden" 相反,元素将具有由浏览器计算的宽度和高度(正常情况下)。

下面是基于lod3n答案和999评论的jquery解决方案:

var getHiddenElementHeight = function(element){
    var tempId = 'tmp-'+Math.floor(Math.random()*99999);//generating unique id just in case
    $(element).clone()
    .css('position','absolute')
    .css('height','auto').css('width','1000px')
    //inject right into parent element so all the css applies (yes, i know, except the :first-child and other pseudo stuff..
    .appendTo($(element).parent())
    .css('left','-10000em')
    .addClass(tempId).show()
    h = $('.'+tempId).height()
    $('.'+tempId).remove()
    return h;
}

享受!

在渲染元素之前,它没有高度。即使克隆父对象并将其显示在用户看不到的地方,也不能保证克隆的高度与隐藏对象的最终大小相同。

有许多事情可能会影响克隆中不一定呈现的高度——DOM中的任何内容及其与CSS规则的交互都可能导致呈现DOM的任何其他元素的更改。除了克隆整个文档(即使这不是很好的证明),您无法确定隐藏对象的高度。

如果你 必须 在显示给用户之前要知道它的高度,你必须通过在尽可能短的时间内显示它来“黑客”它,然后再次隐藏它。最有可能的是,用户会看到这个打嗝,对结果不满意。

所以,你甚至不能改变 display:none; 到 height:0; overflow:hidden; ?也许您可以像这样在自己的样式表中重写它:

div#parent { display: block !important; height:0; overflow:hidden; }

然后,当您使用yui(假设yui 2)时,您可以使用:

var region = YAHOO.util.Dom.getRegion('child');

获取子级的维度和偏移量。

尝试使用:

#parent{ display:block !important; visibility:hidden; position:absolute} 

使用z-index隐藏非透明元素下的元素,显示它,并获取高度。

我最后不得不做的是:

使用yui 2,在页面加载时,我发现给定类名的所有元素要么设置为display:none,要么其高度和宽度为0(这是一种测量元素是否存在的方法,要么将父元素设置为display:none)。然后我将该元素设置为显示:block。然后我检查了它的父对象,并向父对象显示,直到它找到一个可见的父对象。一旦最高显示:无祖先被设置为显示:块,我就可以测量我的元素。

测量完所有元素后,我将所有元素重置为显示:无。

你试过这个吗?

setTimeout('alert($(".Var").height());',200);