【问题标题】：jQuery width(); not working properlyjQuery 宽度（）；不能正常工作
【发布时间】：2016-08-13 17:52:11
【问题描述】：

我想我快疯了:)。

在我的 js 文件中：

alert( $('.element').width() );

它会警告“867”...这是错误的。

在 Chrome 或 Firefox 控制台中输入：

$('.element').width();

它以 567 响应。这是正确的。

我在这里错过了什么吗？我应该以不同的方式来做这件事。导致js文件中的代码乱七八糟。

顺便说一句，该元素确实通过 CSS 设置了宽度和浮动——宽度：80% 和浮动：左。但是浏览器控制台仍然给了我正确的宽度。

谢谢。

【问题讨论】：

【解决方案1】：

试试

$('.element').outerWidth();

如果有帮助请告诉我

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

尝试编辑... 您是否在 dom 准备好后将元素动态加载到元素中？元素里面有图片吗？
那么我到底错过了什么，因为它完美无缺。 :) 我没有意识到我需要把它放在 .load() vs .ready()...
当 dom 准备好时，html 元素已完成在 dom 中的构建。图像和其他东西在 dom 准备好后加载。通过将其放入 window.load 您等到它们完全加载后再创建下一个事件。这是一些文档：stackoverflow.com/questions/21204612/…
笨蛋！感谢您的修复、解释和链接。你太棒了！

【解决方案3】：

有时您必须使用考虑填充和边距额外尺寸的属性。像 innerWidth 这样的命令关注元素的填充，但 outerWidth 对应于计算它的边框的大小（如果接收到 true，它们的边距也是如此）。

【讨论】：

【解决方案4】：

原因

.width() 方法以浏览器的reflow and repaint 为准。浏览器在运行时重排和重绘 DOM 对象。对 HTML 文档的视觉更改也会触发重排和重绘。

由于这些原因，.width() 方法将在回流和重绘仍即将发生的浏览器状态期间返回零 (0) 值。

解决方案

在回流和重绘后始终调用.width() 方法。

$(document).ready(function(){
    // during this state, .width() is more likely equal to zero (0)
});

在$(document).ready 期间，DOM 对象已准备好进行操作。但是，浏览器仍在进行回流和重绘。因此，您很有可能会得到.width() = 0

$(window).load(function(){
    // during this state, .width() is more likely to have the right values
});

在$(window).load，DOM 对象已准备好进行操作，浏览器完成重排并重新绘制文档上的所有内容。

HTML

<div style="display:none">
    <button>Foo</button>
</div>

jQuery

// still hidden
$('button').width(); // 0

// now shown
$('div').show();
$('button').width(); // right value

同样，要解决零宽度问题，请始终在回流和重绘后调用 .width() 方法。

【讨论】：