Question

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

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

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

CSS：

#container {
    width: 100%;
}

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

HTML：

<div id="conatiner">
    <div id="main"></div>
</div>

的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的{{1}问题时偶然发现这个问题（就像我一样） }。

Answer 2

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

这篇文章的接受答案： webkit browsers are getting elements.width() wrong

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

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

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

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

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

Answer 6

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

另一方面，

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

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

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

6 个答案: