如何比較嵌套div的高度？

Question

我有2個divs，一個在另一個裏面。

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

ads_content div的最大高度爲230px，它有overflow：hidden。所以會顯示來自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。 使用元素的clientHeight屬性。

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