Jquery获得隐藏元素的高度

Question

我试图得到一个元素的高度值列表,但它返回0.
我做了一些研究,看到为了获得元素的高度,该元素必须是可见的.
但是当它被隐藏时我想检查它的高度.如果它的高度大于某个值,则使用某些函数然后使其可见.有没有办法做到这一点？

我的意思是:

1. 检查隐藏元素的高度.
2. 如果它具有OK值,则使其可见.
3. 如果没有所需的值,请执行一些功能.
4. 让它可见.

Answer 1

您可以show将元素得到高度,然后将其隐藏,在视觉上,你不会看到任何区别.

var height = $('elementSelector').show().height();
$('elementSelector').hide();
if(height != <<HeightToCompare>>){
    //Code here
}
//Finally make it visible
$('elementSelector').show();

演示

Answer 2

一种方法是克隆对象,将克隆定位在视口之外,使其可见,测量克隆,然后销毁它.

所以你有了:

<div id="maybe" style="display: none;">
  Something
</div>

既然你正在使用jQuery,你会做这样的事情:

$('#maybe')
  .clone()
  .attr('id','maybe_clone') // prevent id collision
  .css({                    // position far outside viewport
    'position': 'absolute',
    'left': '-1000px'
  });

if( $('#maybe_clone').show().height() > 200 ) {
  $('#maybe').show();
}

$('#maybe_clone').remove();       // housekeeping