Question

我有2个div，一个在另一个里面。

<div id="ads_content" class="ads_contents">
    <div id="ads_text" class="ads_text">
        ... text contents ...
    </div>
</div>

ads_content div的最大高度为230px，它有溢出：隐藏。因此，ads_text div会显示一定数量的文本。我需要比较他们的高度，以决定是否需要添加“展开”按钮。

我喜欢这个：

$(document).ready( function() {
    $('.ads_contents').each(function() {
        var t = $(this);
        var needed_height = t.children('.ads_text').css('height');
        var actual_height = t.css('height');
        if (actual_height < needed_height) {
            t.after('<div class="expander" onclick="expand_collapse(' + getAdId(t.attr('id')) + ', this);">Mehr</div>');
        }
    });  
});

在Opera和FF中一切都很好。问题是：在IE中，actual_height和needed_height是'auto'。在webkit中，它们的值是相等的，直到整个文档加载。

对于Chrome我已经做了一个解决方法，使用setTimeout 300毫秒，但这不是我想要的。任何人都可以告诉我，我怎样才能比较webkit和IE中这些div的高度？

Answer 1

尝试使用jquery height（）方法，就我记忆而言，它在IE中正常工作。 http://api.jquery.com/height/

Answer 2

$(document).ready( function() {
$('.ads_contents').each(function() {
    var t = $(this);
    var needed_height = t.children('.ads_text').height();
    var actual_height = t.height();
    if (actual_height < needed_height) {
        t.after('<div class="expander" onclick="expand_collapse(' + getAdId(t.attr('id')) + ', this);">Mehr</div>');
    }
});

}）;

Answer 3

有一种方法适用于所有浏览器，不需要jquery。使用element的clientHeight属性。

if ( document.getElementById("YourelementId").clientHeight > '500' )
 {
 **do something**
 }
else
 {
 **do something else**
 }

如何比较嵌套div的高度？

3 个答案: