5

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

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

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

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

4

4 回答 4

16

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

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

经典的解决方案是将元素放置在屏幕外，检查宽度，然后将其隐藏并放回原处。（您可能会找到一个 jquery 插件，它可以在一个命令中执行此操作。）

有时有一些方法可以重组 html 和/或 css，这样你就可以避免这种情况。

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

您也可以尝试将 设置visibility为hidden，以便元素获得大小，但不可见。根据您的设计，这可能会起作用。

于 2012-08-23T05:25:14.737 回答
1

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

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

于 2014-03-18T17:27:33.947 回答
1

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

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

换句话说，例如，如果您正在检查 a<td>内部的宽度，请<th>确保在触发假的 resize 事件并检查outerWidth.

由于 Ariel 在https://stackoverflow.com/a/12085210/774630中提到的限制，这是一种解决方法

于 2016-11-23T00:27:26.693 回答
0

如果元素本身的边距为负，则 outherWidth() 可以返回无效数据

于 2014-05-09T22:18:00.960 回答