jquery - 读取带有显示 :none parent 的 div 的 scrollHeight

Question

父 div 中的 div 元素使用 display:none 隐藏。

• 我将 jQuery textarea 元素转储到控制台。我看到第 0 个元素的 scrollHeight 属性是 88。
• 我尝试将此属性读取到 var(使用 $(element)[0].scrollHeight 或 $(element).prop('scrollHeight') 和我得到 0。

我还尝试使用 jQuery 将 textarea 设置为 position: absolute 和 display: block，在读取之前，结果相同.

如何正确读取属性？

Answer 1

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

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

一般来说，这涉及:

1. 切换 - 快速使元素可见，检查高度，然后恢复

   当切换时，您可以在绘制周期之间使可见和撤消，但不能保证。特别是当您要测量的元素深深嵌套在隐藏的父元素中时。

2. 克隆 - 尽可能模拟元素的属性并在屏幕外渲染

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

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

• Need to find height of hidden div set to display:none
• Get the size of an element when inside a display:none parent
• Check if element is visible in DOM

还有一个库叫做 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>