2

浏览器引擎在这种情况下如何工作非常有趣，因为我在 IE、Firefox 和 Chrome 中对其进行了测试，它们的工作方式都不同。例如：

<style>
.parent{
width:100px;
}
.expand{
width:200px;
}
</style>

<div class="parent">
<div class="child"></div>
</div>

<input type="button" id="btn" />

<script>
//onready
$('#btn').click(function(){
$('.parent').toggleClass('expand');
alert($('.child').width());
});
</script>

问题出在铬上。我不知道为什么，但是 ('.child').width() 总是旧值，而不是他父母的新宽度。何时以及如何重新计算宽度？

4

1 回答 1

7

何时以及如何重新计算宽度？

正如您所发现的，它可能依赖于浏览器。

如果您通过释放 JavaScript 线程给浏览器一点时间来完成它的工作，您会看到新值：

$('#btn').click(function(){
    $('.parent').toggleClass('expand');
    setTimeout(function() {
        alert($('.child').width());
    }, 0);
});

实例| 来源 （另请参阅下面的注释）

当然，延迟不会真正为 0 毫秒，但确实会非常短暂。

另外，这条线

$('parent').toggleClass('expand');

应该

$('.parent').toggleClass('expand');

（注意前导.）

...我应该注意，对我来说，在 Chrome for Linux 上，它可以在没有超时的情况下工作：示例| 资源

于 2013-01-10T14:37:13.537 回答