Как сравнить высоту вложенных элементов?

Question

У меня есть 2 деления, один внутри другого.

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

Максимальный рост в ads_content div составляет 230 пикселей, а переполнение: скрыто. Таким образом, будет показано определенное количество строк текста из 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 все нормально. Проблема в: actual_height и required_height 'auto' в IE. И в webkit их значения равны, пока не загрузится весь документ.

Для Chrome я сделал обходной путь с setTimeout на 300 мсек, но это не то, что я хочу. Может кто-нибудь сказать мне, как я могу сравнить высоты этих div в webkit и IE?

Answer 1

Попробуйте использовать метод jquery height (), насколько я помню, в IE он работает нормально. http://api.jquery.com/height/

Answer 2

Есть один способ, который работает во всех браузерах и не требует jquery.Используйте свойство clientHeight элемента.

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

Answer 3

$(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>');
    }
});  

});