获取jQuery中隐藏元素的高度

在前端开发中，经常需要获取元素的高度来进行一系列的操作，但是如果该元素被设置为隐藏，就无法通过常规方法获取其高度。在jQuery中，有以下几种方法可以获取隐藏元素的高度。

方法一：使用show()和height()方法

这种方法比较简单粗暴，直接将元素显示出来并获取其高度，然后再将其隐藏。代码如下：

// 先将元素显示出来
$("#element").show();
// 获取元素高度并存储
var height = $("#element").height();
// 再将元素隐藏
$("#element").hide();

缺点是该方法会短暂地显示该元素，可能会对页面造成一定的影响，不过如果只是获取一次高度的话，可以接受。

方法二：使用clone()和css()方法

这种方法则是先将该元素克隆一份，将克隆出来的元素附加到body中，再获取其高度，最后将克隆的元素删除。代码如下：

// 克隆元素并附加到body中，设置为可见
var clone = $("#element").clone().css({
  "position": "absolute",
  "left": "-9999px",
  "visibility": "hidden"
}).appendTo("body");
// 获取元素高度并存储
var height = clone.height();
// 删除克隆的元素
clone.remove();

该方法对页面影响较小，但是相对比较复杂，需要克隆元素、设置样式等操作。

方法三：使用outerHeight()方法

这种方法则是直接使用jQuery提供的outerHeight()方法，该方法可以获取元素的高度和padding值、边框宽度，还有可选的margin值。代码如下：

// 获取元素高度并存储
var height = $("#element").outerHeight();

该方法比较简单，但是只能获取到高度和padding值，无法获取边框、margin值。

结论

以上三种方法各有优缺点，需要根据实际情况进行选择。如果只是获取一次高度，可以使用方法一；如果需要频繁获取高度，可以使用方法二；如果只需要获取高度和padding值，可以使用方法三。