查找具有display: none的对象的尺寸

Question

在我页面的右边，我有一个赞助商的列表。

我的活动页面区域(左侧)的高度随页面的不同而不同，这取决于它每次包含的故事。

我希望列表的高度与实时页面的高度相匹配，所以我认为我应该始终显示主要赞助商，而对于其余的赞助商，我会隐藏它们，并在每次显示尽可能多的内容。

我的标记如下所示：

<div id="xorigoi">
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/1.png"></a>
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/2.png"></a>
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/3.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/4.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/5.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/6.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/7.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/8.png"></a>
</div>

每张图片都是每个赞助商网站的链接。每个图像都有它自己的高度。

使用display: none隐藏具有类.rest的元素

我正在尝试计算添加新图像是否会使列表比页面更长，但由于元素是隐藏的，因此offsetHeight = 0。

我能做什么?

到目前为止，我的javascript/jquery代码如下所示：

$(
function(){
var containerHeight = $('#mainPageContainer')[0].offsetHeight; // total height of page
var xorigoi = $('#mainRightSide .rest'); // select the sponsors
var newHeight = 1062; // this is the right side height I am already using
$.each( xorigoi , function( index ){
if( newHeight + heightOfNewElement > containerHeight ){
return false; // break each
}
xorigoi.eq(index).css('display','block'); // display the sponsor
newHeight = newHeight + heightOfNewElement;
})
}
)

所以底线是，我如何在上面的函数中获得heightOfNewElement呢？

Answer 1

可以考虑将元素移动到视口之外，而不是显示无。例如：

.rest {position:absolute;top:-9999px;}

Answer 2

因为JavaScript是单线程的，所以浏览器在执行时不会重绘。因此，您可以安全地将元素设置为display:block，测量它们，然后再次隐藏它们，用户将不会更明智。

Answer 3

我猜这会对你有帮助。

console.log(getDimensions($('#myElement')));

function getDimensions(element){
    var tempElement = $(element).clone();
    $(tempElement).css('display','block').css('visibility','hidden');
    $(document.body).append(tempElement);
    var obj = new Object();
    obj.width = $(tempElement).width();
    obj.height = $(tempElement).height();
    $(tempElement).remove();
    return obj;
}