如何在JavaScript DOM更新後觸發CSS佈局重新計算？

我經常發現，如果我在javascript中創建或重新使用DOM節點，CSS引擎不會重新計算父容器的大小。這發生在Firefox和Chrome中。如何在JavaScript DOM更新後觸發CSS佈局重新計算？

例如，body可能保持相同的大小，而新的內容溢出底部。如果我調整身體的窗口大小，但它不會「鎖定」到正確的大小，直到窗口大小爲，至少與body一樣大。

有沒有辦法在Javascript中觸發完整的佈局重新計算？

來源

2014-01-10 spraff

聽起來像一切從Android瀏覽器4到智能電視的測試你在造型上做錯了什麼，因爲這不應該是一個問題？ – adeneo

你有這些嗎？ 'html {height：100％; { body {min-height：100％;} }' –

我正在使用[this]（http://peterned.home.xs4all.nl/examples/csslayout1.html）方法。 – spraff

您可以通過將CSS樣式設置爲無害值來觸發JavaScript重繪，例如，

document.body.style.zIndex = 1;

來源

2014-01-10 23:00:54

這不適合我 –

我可以能夠觸發通過CSS引擎：調整窗口大小使用下面的後

document.body.style.zoom = 1.0000001; 
setTimeout(function(){document.body.style.zoom = 1;},50); //allow some time to flush the css buffer.

對於每一個時間：

$(window).resize(function() { 
    if(this.resizeTO) clearTimeout(this.resizeTO); 
    this.resizeTO = setTimeout(function() { 
     $(this).trigger('resizeEnd'); 
    }, 500); 
}); 
$(window).bind('resizeEnd', function() { 
    document.body.style.zoom = 1.0000001; 
    setTimeout(function(){document.body.style.zoom = 1;},50); 
});

來源

2014-03-22 09:41:08

是。我傾向於把隨機className的<html>元素，使用：

document.documentElement.className = 'reflow_' + (new Date()).getTime();

它創建：

<html class="reflow_1483757400611">

嘗試，並通過camposat.tv

來源

2017-01-07 02:49:27

如何在JavaScript DOM更新後觸發CSS佈局重新計算？

回答

相關問題