jQuery width() 没有在生成内容的 div 上返回正确的值答案

【问题标题】：jQuery width() not returning correct value on a div with generated contentjQuery width() 没有在生成内容的 div 上返回正确的值
【发布时间】：2011-09-06 17:27:38
【问题描述】：

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

从 .get() 调用返回的数据是一个 ul，有时比 #main 宽，有时不是。内容的宽度似乎与 .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();

【问题讨论】：

很奇怪，因为文档说 width() 将始终以像素为单位返回值 (api.jquery.com/width) -> “...返回无单位的像素值（例如，400）”
无法使用提供的代码进行复制：jsfiddle.net/w7kqb/1 请提供一个无法使用的示例。
您错过了该警报的结束)。我认为在你的真实代码中不是这样吗？
main的实际宽度有可能是95像素吗？
怎么没有人注意到他在ajax请求发出之前很久就调用.width()，更不用说完成并执行它的成功回调（ul在哪里被添加到#main）？我的天

标签： javascript jquery

【解决方案1】：

我在尝试在用于内联编辑的文本区域上实现 jquery.autogrow-textarea 时遇到了同样的问题。文本区域包含在尚未显示的div 中（css display: none;）。在调试 .autogrow() javascript 代码时，我发现 jQuery 的 .width() 正在返回百分比值，其中删除了“%”字符，而不是计算的像素宽度（例如 100 表示 100%，80 表示 80%）。

这是说明这种情况的 jsfiddle：http://jsfiddle.net/leeives/ujE6s/

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

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

【讨论】：

我从 .width() 获得百分比回报的唯一一致方式是当元素不可见时。我认为这是正确的答案。

【解决方案2】：

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

这个帖子的公认答案： webkit browsers are getting elements.width() wrong

Gaby 回答了使用建议：$(window).load(...) 工作得很好。

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

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

【讨论】：

【解决方案3】：

这是因为 AJAX 是异步的。当您运行alert 时，请求还没有返回。

固定代码：

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

【讨论】：

我认为#main 的宽度不受其内容的影响。

【解决方案4】：

如果您修复代码的最后一行，这将有效：

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

这是小提琴

http://jsfiddle.net/UMAbx/

另外，div id=container 在 HTML 中的拼写错误。固定在小提琴中。

【讨论】：

我上面写的代码并不是实际的代码。是我把代码分解成重要的部分。

【解决方案5】：

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

另一方面，

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

只是添加使用 $.fn.width 之类的东西来获取在浏览器控制台中返回值的函数。