Question

父{1}}中的div元素隐藏了div。

我正在将jQuery display:none元素转储到控制台。我看到第0个元素的textarea属性为scrollHeight。
我尝试将此属性读取到var（使用88或$(element)[0].scrollHeight，我得到$(element).prop('scrollHeight')。

我还尝试在阅读之前使用jQuery将0设置为textarea和position: absolute，结果相同。

如何正确阅读该属性？

Answer 1

`display:none`时元素的大小是多少？ `0px` 作者 `0px`

该元素尚未在屏幕上的任何位置渲染或绘制，因此它确实占用了零像素的空间。问题是否可见，会消耗多少空间很难回答，因为准确回答意味着将假设变为现实。我们实际上需要对其进行渲染，以获取对其大小的可靠度量。

通常来说，这涉及以下任一方面：

切换-快速显示元素，检查高度，然后还原

在切换时，您可能可以在绘制周期之间使可见和撤消，但不能保证。尤其是如果您要测量的元素深深地嵌套在隐藏的父级内部。
克隆-尽可能模拟元素的属性并在屏幕外渲染

克隆时，元素的尺寸基于周围的大量其他元素和属性。根据页面的复杂程度，也不能保证在屏幕外创建元素会产生与原始元素相同的尺寸。

以下问题提出了几种解决方案，但是大多数解决方案都遵循该基本模式：

还有一个名为jQuery.Actual（2.4KB）的库，该库将其中的一些工作进行了抽象：

这是他们自己的Demo Page，也是堆栈摘录：

console.log("width: ", $("#inner").actual("width"))
console.log("height: ", $("#inner").actual("height"))

#outer, #inner {
  margin: 10px;
  padding: 10px;
}
#outer {
  background: #d1e3ef;
}
#inner {
  background: #9ebae9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>

<div id="outer" style="display:none">
  <code>#outer</code>
  <div id="inner">
    <code>#inner</code>
  </div>
</div>

Answer 2

您需要为父div设置dispaly：block属性。在使用$（element）[0] .scrollHeight获取scrollheight之后，您可以将display：none设置为main div。

所以你的代码将是

$('#mainDiv').show();
// Dump html to div
// Read height
var heightOfDiv = $('#mainDiv')[0].scrollHeight
// Hide the div
$('#mainDiv').hide();

Answer 3

不幸的是，这不可能。

我建议您阅读以下链接：MDN | Display或Article from nomensa，它们唤起了DOM可访问性和可见性的概念。实际上，如果将元素放在“ display: none”上，该元素将不可见并退出the DOM accessibility tree。但是，有一些技术可以使DOM元素完全不可见，并且不再被认为存在于DOM上。

那么显然您肯定应该知道一些技术

第一个，如果您想完全mask your parent div without worrying about its dimensions，请提出以下代码。 The clip property正在贬值，但如果没有贬值，它仍然会隐藏我们的商品。

console.log(document.getElementById('child').scrollHeight);

.hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
  z-index: -1;
}

<div class="hidden parent" href="#main">
  I am ignored by the DOM
  <div id="child">I am child</div>
</div>
<span style="color:red">I am the N°1</span>

否则，如果需要to keep the dimensions of your parent div，则可以将其从DOM流中浮出。

console.log(document.getElementById('child').scrollHeight);

.hidden {
	height: auto;
  width: auto;
  visibility: hidden;
	position: absolute;
  z-index: -1;
}

<div class="hidden parent" href="#main">
  I am ignored by the DOM
  <div id="child">I am child</div>
</div>
<span style="color:red">I am the N°1</span>

我希望这个答案会有所帮助。

Answer 4

带有display: none的元素不仅不会显示，而且DOM树也不会处理。这就是为什么scrollHeight将为0的原因。

否则，对于visibility: hidden，该元素将不可见，但是它将在DOM中保留其空间。因此它将具有一个不同于0的scrollHeight。

然后，要读取属性并使元素隐藏，可以使用$('#elementId').prop('visibility','hidden'); $('#elementId').prop('scrollHeight')。

使用display：none parent读取scroll的scrollHeight

4 个答案:

`display:none`时元素的大小是多少？ `0px` 作者 `0px`

使用display：none parent读取scroll的scrollHeight

4 个答案:

display:none时元素的大小是多少？ 0px 作者 0px

`display:none`时元素的大小是多少？ `0px` 作者 `0px`