什麼時候在HTML表格中應用新風格

瀏覽器引擎在這種情況下如何工作非常有趣，因爲我在IE，Firefox和Chrome中測試它，它們的工作方式各不相同。例如：什麼時候在HTML表格中應用新風格

<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（）始終是舊值，但不是他父母的新寬度。重新計算寬度的時間和方式如何工作？

來源

2013-01-10 Garik

您應該接受您的接受評級。您有一些問題需要您回答，以便提高您的評分，從而提高獲得正確答案的機會。 – Constantinius

何時以及如何重新計算寬度的作品？

正如您發現的那樣，它可能依賴於瀏覽器。

如果你給瀏覽器中的瞬間通過釋放的JavaScript線程做的工作，你看到新的價值：

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

Live Example | Source（另請參閱下面的註釋）

延遲當然不會真的是0毫秒，但它確實非常簡短。

另外，該行

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

應該

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

（注領導.）

...我應該注意到，對於我來說，在Chrome對於Linux，它在沒有超時的情況下工作：Example | Source

來源

2013-01-10 14:37:13

'.parent'怎麼樣這只是在例子中的錯誤，因爲它不是複製粘貼。本主題的主要思想是如何知道佈局更改後何時能夠獲得正確的尺寸？ – Garik

@Garik：我想（儘管通常最好是實際使用複製和粘貼 - 首先製作你的示例，然後當它演示你所看到的內容時，通過複製粘貼來發布）。答案的主要思想是'setTimeout（function（）{/ *現在更新* /}，0）;'給瀏覽器一點時間做它的事情並給你回電。 –

謝謝，下次我會複製粘貼。是否有可能強制重新計算？誰對此負責？它是如何工作的一些標準？ – Garik

什麼時候在HTML表格中應用新風格

回答

相關問題