獲取元素高度的問題

我想用jQuery獲取元素的高度，但由於某種原因它總是返回0。獲取元素高度的問題

我在容器中使用ajax加載內容。此內容默認爲隱藏（display: none）。在顯示內容之前，我需要檢索新內容中元素的高度。其中should work。

我的簡化代碼：

success: function(data) // this is the success callback of jquery's ajax call 
{ 
    var content = $('#content'); 
    content.fadeOut('slow', function() { 
    content.html(data.html); 
    set_comments_height(); 
    content.fadeIn('slow'); 
    }); 
} 

function set_comments_height() 
{ 
    var content = $('#content'); 
    var info = $('.trackinfo .artwork-and-info', content); 

    console.log(parseInt(info.outerHeight(true), 10)); 
}

您可以點擊在左側的軌道之後看到my website問題。

我可能會錯過這裏的東西，但我不明白爲什麼它不會返回正確的高度。

來源

2011-12-26 PeeHaa

這不會隱藏要素工作。 – Alfabravo 2011-12-26 22:38:42

@Alfabravo如何在jsfiddle中工作？ – PeeHaa 2011-12-26 22:42:25

哇。看起來我變老了hehehe。是的，它現在起作用。嘗試使用單個選擇器，如： ** $（'＃content> .trackinfo> .artwork-and-info'）。outerHeight（true）; ** 我在控制檯中嘗試了您的網站，它的計算結果爲109 – Alfabravo 2011-12-26 22:55:25

outerHeight()將爲display屬性設置爲none的元素返回0。爲了解決這個問題，在你的AJAX的成功處理器中，在設置html之前，將元素的opacity設置爲0和display爲block（它仍然不會顯示爲不透明度爲0）。一旦HTML設置，叫你set_comments_height（）函數，然後一個CSS動畫，把它帶回opacity: 1

即

success: function(data) // this is the success callback of jquery's ajax call 
{ 
    var content = $('#content'); 
    content.fadeOut('slow', function() { 

    // opacity -> 0 and display -> block 
    content.css({'opacity': 0, 'display': 'block'}); 

    content.html(data.html); 
    set_comments_height(); 

    // instead of fadeIn, use CSS animation to bring it to opacity 1 
    content.animate({'opacity': 1}, 'slow'); 

    }); 
}

來源

2011-12-27 01:10:51 techfoobar

但是它如何在jsfiddle上運行？附：你是正確的，但。它似乎現在恢復了正確的高度。 – PeeHaa 2011-12-27 01:13:32

那麼，這很有趣。我不止一次遇到過這個問題，每次我不得不採取一些黑客行爲（像我指出的那樣），我想知道jQuery的後續版本是否已經修復。讓我再看看這個。我會盡快給您回覆。 – techfoobar 2011-12-27 01:33:38

@PeeHaa jsFiddle和你的網站都有jQ 1.7.1。這很奇怪 – Alfabravo 2011-12-27 14:34:20

獲取元素高度的問題

回答

相關問題