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

Question

浏览器引擎在这种情况下的工作方式非常有趣，因为我在 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() 总是旧值，而不是他 parent 的新宽度。何时以及如何重新计算宽度？

Answer 1

When and how does recalculating for width works?

如您所见，它可能依赖于浏览器。

如果您通过释放 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