获取jQuery中隐藏元素的高度

在进行网页设计的时候，我们经常需要获取一个元素的高度。但是在jQuery中，如果这个元素是被隐藏的，那么获取它的高度就会变得有些困难。本文将介绍几种方法，帮助程序员们在获取隐藏元素的高度时更加方便。

方法一：使用show()方法

首先，我们可以使用show()方法将元素显示出来，然后获取它的高度。代码如下：

$(document).ready(function(){
  var elementHeight;
  
  //显示元素
  $('#element').show();
  
  //获取元素高度
  elementHeight = $('#element').height();
  
  //隐藏元素
  $('#element').hide();
});

这种方法简单易懂，不需要过多的计算。但是，如果你只是想获取一个元素的高度，而不想在页面上让它显示出来，这个方法就有些不便了。

方法二：使用clone()方法

我们可以使用clone()方法复制一个元素，然后让复制的元素显示出来。代码如下：

$(document).ready(function(){
  var elementHeight;
  
  //复制元素
  var cloneElement = $('#element').clone();
  
  //将复制元素添加到body中
  $('body').append(cloneElement);
  
  //获取元素高度
  elementHeight = cloneElement.height();
  
  //移除复制元素
  cloneElement.remove();
});

这种方法同样可以获取隐藏元素的高度，且不会让元素显示出来。但是，它需要多一些代码来复制、添加、移除元素，稍显繁琐。

方法三：使用position()方法

我们可以使用position()方法获取元素的位置信息，然后计算出元素的高度。代码如下：

$(document).ready(function(){
  var elementHeight;
  
  //获取元素位置信息
  var position = $('#element').position();
  
  //设置元素为绝对定位
  $('#element').css({
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
  });
  
  //计算元素高度
  elementHeight = $('#element').outerHeight();
  
  //还原元素样式
  $('#element').css({
    position: '',
    visibility: '',
    display: ''
  });
});

这种方法需要计算元素的高度，稍显繁琐。但是，它可以在不让元素显示出来的情况下获取元素的高度。

以上就是获取jQuery中隐藏元素的高度的三种方法，你可以根据自己的需要来选择不同的方法。