使用 display:none 读取 div 的滚动高度

With a div父元素中的元素div隐藏着display:none.

• 我正在抛弃 jQuerytextarea元素到控制台。我看到scrollHeight第 0 个元素的属性是88.
• 我尝试将此属性读取到 var （使用$(element)[0].scrollHeight or $(element).prop('scrollHeight')我得到了0.

我也尝试设置textarea to position: absolute and display: block使用 jQuery，在读取之前，得到相同的结果。

如何正确读取属性？

当一个元素的大小是多少display:none? 0px by 0px

该元素尚未在屏幕上的任何位置进行渲染或绘制，因此它确实占据了零像素的空间。的问题if它是可见的，它有多少空间would消费这个问题很难回答，因为准确回答它意味着将假设变成现实。我们需要实际渲染它才能可靠地测量其大小。

一般来说，这涉及：

1. Toggling- 快速使元素可见，检查高度并恢复回来

   When toggling，您也许能够在绘制周期之间使其可见并撤消，但这并不能保证。特别是如果您要测量的元素深深嵌套在隐藏的父元素内。

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

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

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

• 需要找到隐藏 div 的高度设置为display:none https://stackoverflow.com/q/1473584/1366033
• 获取位于 a 内的元素的大小display:none parent https://stackoverflow.com/q/10967857/1366033
• 检查元素在 DOM 中是否可见 https://stackoverflow.com/q/19669786/1366033

还有一个图书馆叫jQuery.实际 https://github.com/dreamerslab/jquery.actual(2.4KB) 抽象了一些工作：

这是他们自己的演示页面 http://dreamerslab.com/demos/get-hidden-element-width-with-jquery-actual-plugin还有一个堆栈片段:

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>