使用 jquery 获取隐藏元素的维度。答案

【问题标题】：Using jquery to get dimensions of hidden elements.使用 jquery 获取隐藏元素的维度。
【发布时间】：2011-07-13 16:49:31
【问题描述】：

这是一个常见的问题，但我对此略有不同，所以希望它不是重复的：

我有一种情况，我需要在页面加载时使用 display: none 呈现的元素上触发 .show()。在理想情况下，我会在页面上显示所有内容，然后隐藏需要隐藏的内容。不过，大多数客户讨厌渲染的“闪光”，所以他们通常会犹豫。

我现在需要做的是获取设置为显示的元素的宽度：无；有很多方法可以做到这一点，但传统上有点笨拙，例如“克隆 html，设置为阻止，进行计算，删除克隆”类型的东西。

问题的“扭曲”是：是否有更新/更好/默认的标准方法来使用更新版本的 jQuery (1.6.*)？还是我们仍要恢复滚动我们自己的解决方法？

【问题讨论】：

标签： jquery dimensions

【解决方案1】：

在某些情况下，您可以设置为 position: absolute, visibility: hidden, display: block 以使其具有适当的大小（尽管不受周围任何事物的限制，因为它已从布局中删除），但不是可见且不影响页面布局。然后，设置回 display: none, position: static 和 visibility: visible 以使其恢复原状。

【讨论】：

仍然看起来很老套，但会试一试！为什么位置是静态的而不是相对的？
static 是position 的默认值，它在一些微妙而重要的方面与relative 不同 - 带有position: absolute 的子节点相对于具有@987654325 的第一个祖先@，相对定位可能会在 IE 中触发一些非常可怕的错误，并且顶部/左侧/底部/右侧 css 参数将适用（除其他外）
@digitalbath：我不知道你的评论是什么意思。我的观点是位置：绝对，显示：块和可见性：隐藏的对象将不可见，但将由浏览器布局以使其具有自然大小。在某些情况下，这对于在不使其可见的情况下找出对象的布局大小很有用。
@jfriend00，我正在回复@DA 的评论。
@digitalbath：我明白了。 @DA：我使用 position: static 只是为了将对象恢复到原来的状态。

【解决方案2】：

通常，如果您在 css 文件中设置默认高度-宽度，您应该能够获得隐藏元素的宽度/高度。

看这里：http://jsfiddle.net/qyJjh/

【讨论】：

我需要相反的...找到我没有设置的东西的宽度。
就像我为高度所做的那样在css中设置宽度jsfiddle.net/qyJjh/1
我无法设置宽度。我根据各种其他宽度动态设置它。所以我无法预设。这是一个移动应用程序，我们正在处理各种屏幕分辨率 - 因此尝试通过 JS 而不是通过 CSS 动态设置宽度。

【解决方案3】：

我只会显示具有负边距的元素，例如 -99999px，绝对定位以避免破坏布局。然后你可以显示它并获取宽度和高度，如果你这样做，我认为这样做并不是特别hack。

【讨论】：

我也会尝试使用 opacity:0（以及各种跨浏览器替代方案）或负 z-index...从未尝试过。
无论如何我尝试使用 jQuery 获取 display:none 元素的大小，它在所有浏览器中都可以正常工作...jsfiddle.net/sJL6T/9
这确实有效，但挑战在于您是否需要获取子元素的大小：jsfiddle.net/sJL6T/10
然后我会显示父级并在您完成后再次隐藏它。 jsfiddle.net/sJL6T/28
是的，这一直是我的首选方法。不过，它有时会在较慢的设备上导致“渲染闪烁”。