使用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的实际高度

回答

相关问题