jQuery width（）;不正常

Question

我想我疯了：）。

在我的js文件中，我有：

autocomplete

它会警告＆＃34; 867＆＃34; ......哪个错了。

在Chrome或Firefox控制台中，我输入：

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

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

我在这里遗漏了什么。我应该以不同的方式做这件事。导致js文件中的代码混乱不堪。

BTW元素确实有宽度和浮点数通过CSS设置 - 宽度：80％和浮点数：左。但浏览器控制台仍然给我正确的宽度。

感谢。

Answer 1

试试这个：

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

Answer 2

尝试

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

如果有帮助请告诉我

Answer 3

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

看看这个已经关闭的主题，我希望这一定能帮到你：What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery

Answer 4

原因

.width（）方法受浏览器reflow and repaint的约束。浏览器在运行时重排并重新绘制DOM对象。对HTML文档的可视更改也会触发重排和重绘。

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

解决方案

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

常见情况

案例＃1。文档就绪VS Window加载

$(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对象已准备好被操作，浏览器完成了重排并重新绘制了文档中的所有内容。

案例＃2。隐藏的VS显示

<强> HTML

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

<强>的jQuery

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

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

同样，要修复零宽度问题，请在重排和重绘后调用.width()方法。