Javascript jQuery width() 没有在带有生成内容的 div 上返回正确的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6208951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery width() not returning correct value on a div with generated content
提问by ursasmar
With the code below, the alert doesn't return the actual size of #main, it always returns the value of #main's css width with the % dropped. So in this case I get 95 in the alert. If I alert parent().width() I get 100.
使用下面的代码，警报不会返回#main 的实际大小，它总是返回#main 的css 宽度的值，并且% 被删除。所以在这种情况下，我在警报中得到 95。如果我提醒 parent().width() 我得到 100。
The data returned from the .get() call is a ul that sometimes is wider than #main, and sometimes not. The width of the content doesn't seem to have any bearing on what .width() returns.
从 .get() 调用返回的数据是一个 ul，有时比 #main 宽，有时则不宽。内容的宽度似乎与 .width() 返回的内容没有任何关系。
So my question is, how do I get the true pixel width of #main?
所以我的问题是，如何获得#main 的真实像素宽度？
CSS:
CSS：
#container {
width: 100%;
}
#main {
width: 95%;
overflow: hidden;
}
HTML:
HTML：
<div id="conatiner">
<div id="main"></div>
</div>
Javascript/jQuery:
Javascript/jQuery：
$.get('page.php', function(result) {
$('#main').html(result);
});
alert($('#main').width();
回答by leeives
I ran into this same issue while trying to implement jquery.autogrow-textareaon textareas used for inline editing. The textareas were contained within div's that were not yet displayed (css display: none;). While debugging the .autogrow()javascript code, I discovered that jQuery's .width()was returning the percentage value with the '%' character removed as opposed to the calculated width in pixels (e.g. 100 for 100%, 80 for 80%).
我在尝试在用于内联编辑的 textareas上实现jquery.autogrow-textarea时遇到了同样的问题。文本区域包含在div尚未显示的 's 中（css display: none;）。在调试.autogrow()javascript 代码时，我发现 jQuery.width()返回的百分比值去掉了 '%' 字符，而不是计算出的像素宽度（例如，100 表示 100%，80 表示 80%）。
Here is the jsfiddle that illustrates this scenario: http://jsfiddle.net/leeives/ujE6s/
这是说明这种情况的 jsfiddle：http: //jsfiddle.net/leeives/ujE6s/
To work around this, I changed my code to .autogrow()as soon as the textarea was displayed instead. The calls to .width()were then accurate.
为了解决这个问题，我将代码更改.autogrow()为在 textarea 显示后立即显示。对的调用.width()是准确的。
I'm not sure if you're working with hidden content or not, but thought I'd write up my answer in case others stumbled upon this (like I did) while searching for an issue with jQuery's .width().
我不确定您是否正在处理隐藏内容，但我想我会写下我的答案，以防其他人在搜索 jQuery 的.width().
回答by secretwep
I ran into this same problem. For whatever reason (environment) I was not able to pull the correct .width() off of a div that had a percentage value for the width in CSS.
我遇到了同样的问题。无论出于何种原因（环境），我都无法从具有 CSS 宽度百分比值的 div 中提取正确的 .width() 。
The accepted answer to this post: webkit browsers are getting elements.width() wrong
这篇文章的公认答案： webkit browsers are getting elements.width() wrong
where Gaby answered with the suggestion to use: $(window).load(...) worked perfectly.
Gaby 回答了使用建议： $(window).load(...) 工作得很好。
$(window).load(function () {
alert($('#main').width();
});
I know it's an old post, but this may be useful info to someone if they don't come across the other post.
我知道这是一个旧帖子，但是如果他们没有遇到其他帖子，这对某人来说可能是有用的信息。
回答by Florian Margaine
This is because AJAX is asynchronous. When you run the alert, the request hasn't come back.
这是因为 AJAX 是异步的。当您运行 时alert，请求没有返回。
Fixed code:
固定代码：
$.get('page.php', function(result) {
$('#main').html(result);
alert($('#main').width());
});
回答by Jason Gennaro
This works if you fix the last line of your code:
如果您修复代码的最后一行，这将起作用：
alert($('#main').width());
Here is the fiddle
这是小提琴
Also, div id=containerwas spelled incorrectly in the HTML. Fixed in the fiddle.
此外，div id=container在 HTML 中拼写错误。固定在小提琴中。
回答by AlbertSY
jQuery width() returns the width of an element without its border and padding.
jQuery width() 返回没有边框和填充的元素的宽度。
CSS widthin the other hand could include border and padding (that depends on your browser/css default box model behaviour).
If you need the entire width of the element, you should use jQuery outerWidth() instead.
另一方面，CSS宽度可能包括边框和填充（这取决于您的浏览器/css 默认框模型行为）。
如果你需要元素的整个宽度，你应该使用 jQuery outerWidth() 代替。
$.get('page.php', function(result) {
$('#main').html(result);
alert($('#main').outerWidth();
});
回答by Rob Sobers
I can't seem to replicate this behavior. Perhaps someone overrode jQuery.fn.width()with an implementation that returns the value as a percentage? I'd debug in Firebug or similar and inspect that function to be sure.
我似乎无法复制这种行为。也许有人jQuery.fn.width()用一个以百分比形式返回值的实现覆盖了？我会在 Firebug 或类似工具中进行调试并检查该功能以确保。
