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>

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

使用.rest

隐藏具有类display: none的元素

我正在尝试计算添加新图像是否会使列表长于页面，但由于隐藏了元素，因此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

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

Answer 2

猜猜这会对你有帮助。

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

Answer 3

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

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

查找具有display：none的对象的维度

3 个答案: