javascript - 新样式何时应用于HTML表单

在这种情况下，浏览器引擎如何工作非常有趣，因为我在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>

问题出在 Chrome 。我不知道为什么，但是('.child')。width()始终是旧值，而不是其父级的新宽度。何时以及如何重新计算宽度？

最佳答案

如您所见，它可能取决于浏览器。

如果您通过释放JavaScript线程让浏览器有时间完成其工作，则会看到新值:

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

Live Example | Source(另请参见以下注释)

当然，延迟实际上不会是0毫秒，但是确实会非常短暂。

另外，这条线

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

应该

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

(注意开头的.)

...并且我应该注意，对我来说，在Linux版Chrome上，它可以正常工作而不会超时:Example | Source

关于javascript - 新样式何时应用于HTML表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14260264/