jQuery width，outerWidth（），innerWidth（）返回不正确的数据

Question

出于某种原因，我无法让jQuery为各种元素提供可靠的宽度数据。这是一个演示问题的小提琴的链接： http://jsfiddle.net/snoopydaniels/ZDbaa/1/

我正在尝试创建一个多维下拉菜单。正如您在jsfiddle中看到的那样，第二个嵌套菜单未正确定位。我用来定位它的jQuery使用outerWidth()查询兄弟锚元素来发现它的宽度，然后根据返回的宽度选择嵌套列表的左侧位置。当我在CSS中给兄弟锚元素设置一个宽度然后我得到一个接近正确值的东西，但没有那个静态宽度，outerWidth()返回“2”。

但即使我给锚元素设置了一个宽度，outerWidth(true)仍然没有正确地合并元素的边框。

我准备拔头发了。为什么这样的废话不能像宣传的那样工作？

Answer 1

各种宽度命令不适用于隐藏元素（display: none）。

如果使用css设置宽度，jquery将返回该宽度。否则你将得不到或毫无意义的结果。

经典的解决方案是将元素放在屏幕上，检查宽度，然后隐藏它并将其放回原位。 （您可以在一个命令中找到一个jquery插件。）

有时会有重组html和/或css的方法，所以你可以避免这种情况。

有时您可以在显示元素后立即修改大小。

您也可以尝试将visibility设置为hidden，这样该元素就会变大，但不可见。根据您的设计，这可能会有效。

Answer 2

在调用jQuery宽度函数时，我遇到了类似的随机结果问题。浏览器刷新后，我会在50％的时间内得到正确答案。

我犯了错误，立即检查$（document）.ready（）函数中div的宽度。当我改为在$（window）.load（）中调用outerWidth（）时，总是返回正确的答案。

Answer 3

您需要调用$(window).trigger('resize')，这将触发假窗口调整大小事件。 之后，outerWidth应该具有适当的值。

确保在填充数据后触发虚假窗口调整大小事件。

换句话说，例如，如果要检查<td>内<th>的宽度，请确保填充表并在触发伪调整大小事件和检查之前完成所有调整大小outerWidth。

由于Ariel在https://stackoverflow.com/a/12085210/774630

中提到的限制，这是一种解决方法

Answer 4

如果元素本身具有负余量，

outherWidth（）可以返回无效数据