jQuery width();不正常

时间:2016-04-20 20:10:04

标签: javascript jquery css

我想我疯了:)。

在我的js文件中,我有:

autocomplete

它会警告" 867" ......哪个错了。

在Chrome或Firefox控制台中,我输入:

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

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

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

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

感谢。

4 个答案:

答案 0 :(得分:3)

试试这个:

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

答案 1 :(得分:0)

尝试

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

如果有帮助请告诉我

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

原因

.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()方法。