jQuery：获取jQuery中隐藏元​​素的高度

一种解决方法是在要获取其高度的元素外部创建一个父div，将高度设置为“ 0”并隐藏任何溢出。接下来，使用子元素的高度，并删除父元素的溢出属性。

var height = $("#child").height();
// Do something here
$("#parent").append(height).removeClass("overflow-y-hidden");

.overflow-y-hidden {
  height: 0px;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent" class="overflow-y-hidden">
  <div id="child">
    This is some content I would like to get the height of!
  </div>
</div>

根据定义，元素只有在可见时才具有高度。

只是好奇：为什么需要隐藏元素的高度？

一种替代方法是通过将元素放置在某种类型的叠加层之后（使用z-index）来有效地隐藏它。

您也可以使用负边距将隐藏的div置于屏幕之外，而不是使用display：none，就像文本缩进图像替换技术一样。

例如。

position:absolute;
left:  -2000px;
top: 0;

这样，height（）仍然可用。

您正在混淆两种CSS样式，即显示样式和可见性样式。

如果通过设置可见性css样式隐藏了元素，则无论元素是否可见，您都应该能够获得高度，因为该元素仍在页面上占据空间。

如果通过将display css样式更改为“ none”来隐藏该元素，则该元素不会在页面上占用空间，并且您将不得不赋予它一种显示样式，这将导致该元素在某个空间处呈现。哪一点就可以得到高度。