jQuery width（）没有在生成内容的div上返回正确的值

使用下面的代码，警报不会返回#main的实际大小，它总是返回#main的css宽度值，并删除％。 所以在这种情况下，我在警报中得到95。 如果我提醒parent（）。width（）我得到100。

从.get（）调用返回的数据是有时比#main更宽的ul，有时不是。 内容的宽度似乎与.width（）返回的内容没有任何关系。

所以我的问题是，如何获得#main的真实像素宽度？

CSS：

#container { width: 100%; } #main { width: 95%; overflow: hidden; } 

HTML：

使用Javascript / jQuery的：

 $.get('page.php', function(result) { $('#main').html(result); }); alert($('#main').width(); 

Answer 1

我试图在用于内联编辑的textareas上实现jquery.autogrow-textarea时遇到了同样的问题。 textareas包含在尚未显示的div （css display: none; ）。 在调试.autogrow() javascript代码时，我发现jQuery的.width()返回了百分比值，删除了’％’字符而不是计算出的宽度（以像素为单位）（例如100表示​​100％，80表示80％） 。

以下是说明此场景的jsfiddle： http ： //jsfiddle.net/leeives/ujE6s/

要解决这个问题，我会在显示textarea后立即将代码更改为.autogrow() 。 然后，对.width()的调用是准确的。

我不确定你是否正在使用隐藏的内容，但我想我会写下我的答案，以防其他人在搜索jQuery的.width()问题时偶然发现（就像我一样.width() 。

Answer 2

我遇到了同样的问题。 无论出于何种原因（环境），我都无法从具有CSS宽度百分比值的div中提取正确的.width（）。

这篇文章接受的答案： webkit浏览器正在使elements.width（）错误

Gaby回答了使用的建议：$（window）.load（…）工作得很好。

  $(window).load(function () { alert($('#main').width(); }); 

我知道这是一个旧post，但如果他们没有遇到其他post，这可能对某人有用。

Answer 3

这是因为AJAX是异步的。 运行alert ，请求未返回。

固定代码：

 $.get('page.php', function(result) { $('#main').html(result); alert($('#main').width()); }); 

Answer 4

如果您修复代码的最后一行，则此方法有效：

 alert($('#main').width()); 

这是小提琴

http://jsfiddle.net/UMAbx/

此外， div id=container在HTML中拼写错误。 修正了小提琴。

Answer 5

我似乎无法复制这种行为。 也许某人用一个以百分比forms返回值的实现来覆盖jQuery.fn.width() ？ 我在Firebug或类似的程序中调试并检查该function以确定。

Answer 6

jQuery width （）返回没有边框和填充的元素的宽度。

另一方面，CSS 宽度可能包括边框和填充（这取决于您的浏览器/ css默认框模型行为）。
如果你需要元素的整个宽度，你应该使用jQuery outerWidth （）代替。

 $.get('page.php', function(result) { $('#main').html(result); alert($('#main').outerWidth(); });