使用jquery獲取部分隱藏div的實際高度

我有一個最小高度爲75px的可摺疊項目列表。使用「overflow：hidden」隱藏任何超過75像素的內容。根據其內容，每個項目可能有不同的實際高度。有沒有一種方法可以使用jquery獲得每個項目的實際高度，儘管我已經使用css將高度限制在75px。使用.height（）返回75px而不是元素的實際高度。使用jquery獲取部分隱藏div的實際高度

這裏的HTML：

<li class="parent"> 
     <input type="button" id="expand" /> 
     <span></span> 
     <span></span>   
     <span></span> 
     <span></span>   
     <span></span> 
</li>

只有前2個跨度最初顯示。而這裏的jQuery的（連接到按鈕單擊事件）

$("#expand").parent().animate({'height':??},1000);

我需要動態更換？與列表元素的實際高度進行比較，以便在單擊按鈕時將其展開到其全部高度。

任何幫助將不勝感激。

乾杯，卡爾蒂克饒

來源

2011-01-24 Kartik Rao

'height（）'已經返回計算出的高度。 – thirtydot

我想要列表元素的實際高度。不是我使用CSS設置的最小高度。 –

您可能需要提供一些HTML/JS才能獲得答案。編輯：我看到你添加了「overflow：hidden」句子：這改變了事情。 – thirtydot

我認爲最好的辦法是設置height:auto捕捉到新的高度應該是什麼：

var $ep = $("#expand").parent(), 
    epOldH = $ep.height(), 
    epNewH; 

$ep.css('height', 'auto'); 
epNewH = $ep.height(); 
$ep.css('height', epOldH); 

$('#expand').click(function() { 
    $ep.animate({'height': epNewH}, 1000); 
});

Here is a working demo.

來源

2011-01-24 12:57:37 mVChr

非常感謝mVChr！這工作得很好。 –

莫比，你應該嘗試用「innerHeight」/ 「clientHeight」屬性。

來源

2011-01-24 12:02:59

innerHeight沒有工作。 whats clientHeight？ –

您也可以使用JavaScript的scrollHeight屬性。

$("#id_element").attr('scrollHeight')

來源

2013-07-04 15:46:38 QuarK

這是比目前接受的答案更好更快的解決方案。另請參閱http://stackoverflow.com/questions/2522579/how-do-i-get-the-real-height-of-a-overflow-hidden-or-overflow-scroll-div，它使用稍微不同的語法：'$（'＃id_element'）[0] .scrollHeight'。 – marcvangend

使用jquery獲取部分隱藏div的實際高度

回答

相關問題