获取隐藏元素高度的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

Answer 3

将对象定位为浏览器可以看到的对象，而不是用户：jQuery:获取jQuery中隐藏元素的高度