在显示中获取元素的大小：无父元素答案

【问题标题】：Get the size of an element when inside a display:none parent在显示中获取元素的大小：无父元素
【发布时间】：2012-06-13 15:14:39
【问题描述】：

我正在尝试获取将在 jquery-ui 对话框中显示的元素的宽度。

对话框设置为显示：加载时无。这不允许我获得宽度。

我是否需要显示、获取宽度并立即再次隐藏以获取宽度？还是有其他我不知道的选项？

谢谢

【问题讨论】：

不知道有没有其他更好的办法，不过你可以把display:none改成visibility:hidden
到父级或我需要的元素？
元素不能继承display:none，需要隐藏，你想怎么做，就看你了……

标签： jquery width element

【解决方案1】：

你有两个选择：

如果您的 jquery-ui 对话框必须是 display:none，则获取其子级尺寸的唯一方法是 show/get_dimensions/hide。
如果您可以将其设置为visibility:hidden，则无需执行任何操作：只需获取尺寸即可。

但是，将 jquery-ui 容器设置为 visibility:hidden 并不是一件好事，因为它可能会修改系统的整个行为。在 jquery-ui-dialog 脚本中的某处可能对display:none 进行了测试，使用visibility 对其进行修改会破坏此测试。此外，如果没有，则无法确保在 jquery-ui 的未来版本中不会有任何内容。

要快速获取第一种解决方案的尺寸，请参考this answer。

Mootools-more Element.measure 解决方案：

Mootools 在 Mootools-more 的 Element.measure 中实现了显示/测量/隐藏技术。 raw code 不能与 jQuery 一起使用，因为 Mootools 直接扩展元素而不是提供框架包装器，但您可以轻松地根据您的目的对其进行调整。

【讨论】：

将元素置于流之外所需的绝对位置？
在你给我的链接中，答案使用绝对位置。为什么需要它？
好吧，我不知道为什么需要绝对位置，我是你，我只会玩 visibility 和 display 属性。我将使用 Mootools measure 代码编辑我的答案。
对了，Mootools-more 的 Element.mesure 也将元素样式设置为position:absolute。我不知道为什么，但如果有人有解释......
使用绝对位置可以在不影响页面布局或大小的情况下获取元素的尺寸。该元素不可见地放置在页面的左上角，不会破坏其余内容。