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');

（先頭に注意してください.）

...そして私にとって、Linux用のChromeでは、タイムアウトなしで動作することに注意する必要があります。ソース

于 2013-01-10T14:37:13.537 に答える