如何在不将其呈现到页面的情况下获取 div 的正确高度属性？

Question

我正在实现一个 Wordpress 主题，其中内容垂直滑入页面。为此，我需要先测量包含内容的 div 的大小，而不是先对其进行明显渲染。我试图在没有 Ajax 的情况下完成所有这些工作。

这是我迄今为止发现的：

我可以轻松加载文档，读取大小，然后使用 javascript 隐藏 div。不幸的是，有一个非常明显（并且不可接受）的闪烁，因为 javascript 没有足够快地隐藏 div。还有一个问题是，如果将图像放入内容中，我必须等到它们被渲染才能获得真实大小……没有 bueno。

另一种选择是使用 CSS 隐藏内容，但如果用户没有启用 javascript，他们只会盯着一个空白页面。

这把我带到了我现在的位置。

我有一段 javascript 在声明样式表后立即运行，它更改了样式表链接元素的位置，然后使用特定于 javascript 的样式表重新呈现页面。这解决了在读取大小之前必须隐藏内容的问题。

这是通过将包含内容的 div 绝对定位在页面 9999 像素之外来实现的。

#content {
  position: absolute;
  left: -9999px;
}

此时，我使用 jquery 检索内容的高度，代码如下：

$('#content').height();

问题是，返回的数字大小不正确，比实际内容小得多。当我将 css 更改为：

#content {
  position: absolute;
  left: 0px;
}

它正确呈现。是什么赋予了？？有我不知道的错误吗？这发生在 Chrome 和 Firefox 中。

你可以在这里自己查看http://thethechad.com/wordpress

- 更新 - - - - - - - - - - - - - - - - - - - - - - - - ---------------------------

我想出了我的问题。我使用的 div 没有指定宽度。当我将它移到文档流之外时，它会扩展以填充该间隙，移动内容并降低元素的高度。我回到我的 CSS 并对宽度进行硬编码，一切正常。我真的觉得很蠢。我相信我们都有这样的时刻。非常感谢你们的帮助！

Answer 1

我对你冗长的解释有点困惑，但这是我在没有人看到的情况下测量事物的方法。

我为 div 分配了一个类名，我称之为“measure”。Measure有预定义的CSS：

.measure {
    position: absolute;    // doesn't affect layout
    visibility: hidden;    // not visible, but normal size
    left: -1000px;         // won't affect scrollbars
    top: -1000px;          // won't affect scrollbars
}

然后你就可以自由地获取 div 高度了。注意：它的宽度可能与页面布局中的宽度不同，因为当position: static时div会变成全宽。

如果您想确保该对象永远不会被看到，那么您可以在其原始定义中为其指定一个初始类“measure”，然后当您想在页面布局中使用该对象时删除该类。