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

JavaScript CSS

小小Stafan宝儿

2020-03-24

我需要获取隐藏的div内的元素的高度。现在，我显示div，获取高度，然后隐藏父div。这似乎有点愚蠢。有没有更好的办法？

我正在使用jQuery 1.4.2：

$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();

第3508篇《jQuery：获取jQuery中隐藏元​​素的高度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
神乐 2020.03.24

一种解决方法是在要获取其高度的元素外部创建一个父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>

米亚 2020.03.24

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

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

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

老丝 2020.03.24

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

例如。

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

这样，height（）仍然可用。

DavaidTony宝儿 2020.03.24

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android