javascript jQuery 宽度、outerWidth()、innerWidth() 返回不正确的数据

jQuery width, outerWidth(), innerWidth() returning incorrect data

提问by Daniel Arant

For some reason, I cannot get jQuery to give me reliable width data for various elements. Here is a link to a fiddle that demonstrates the problem: http://jsfiddle.net/snoopydaniels/ZDbaa/1/

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

I am attempting to create a multidimensional drop down menu. As you can see in the jsfiddle, the second nested menu is not positioned correctly. The jQuery that I employ to position it queries the sibling anchor element using outerWidth()to discover its width, then sest the left position of the nested list according to the returned width. When I give the sibling anchor element a set width in CSS then I get something near the correct value, but without that static width, outerWidth()returns "2."

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

But even when I give anchor elements a set width, outerWidth(true)still does not correctly incorporate the border of the element.

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

I'm about to pull my hair out. Why can't crap like this just work as advertised?

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

回答by Ariel

The various width commands don't work for hidden elements (display: none).

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

If you use css to set a width, jquery will return that. Otherwise you'll get no, or meaningless, results.

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

The classic solution is to position the element off the screen, check the width, then hide it and put it back. (You can probably find a jquery plugin that will do that in one command.)

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

Sometimes there are ways of restructuring the html and/or css so you avoid this.

有时有一些方法可以重组 html 和/或 css，因此您可以避免这种情况。

Sometimes you can fix the size right after showing the element.

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

You can also try setting the visibilityto hidden, so the element gets a size, but is invisible. Depending on the your design this might work.

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

回答by Hussein El Motayam

You need to call $(window).trigger('resize')which will trigger a fake window resize event. Afterwards, the outerWidthshould have the proper value.

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

Make sure that you are triggering the fake window resize event once your data is populated.

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

In other words, if you are checking the width of a <td>inside a <th>for example, make sure the table is populated and all the resizing is done before triggering the fake resize event and checking the outerWidth.

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

This is a workaround due to the limitations mentioned by Ariel in https://stackoverflow.com/a/12085210/774630

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

回答by Darnuhulu

I had a similar issue in receiving what appeared to be random results when calling jQuery width functions. When the browser was refreshed, I would get the correct answer about 50 percent of the time.

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

I made the mistake of immediately checking the width of the div within the $(document).ready() function. When I changed to calling outerWidth() within $(window).load(), the correct answer was always returned.

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

回答by Mladen Janjetovic

outherWidth() can return invalid data if the element has negative margin on itself

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