jQuery的：檢查是否有動態加載DIV呈現

我動態創建一個div，然後根據該div的寬度應該改變CSS屬性：jQuery的：檢查是否有動態加載DIV呈現

function test(divID){ 
    //some actions - creating the div 'tbl' structure 
    $('#'+divID).html(tbl); 
    var tw = $('#'+divID).width() + 80; 
    $('.page').css("width", tw+"px"); 
}

這一切工作正常在Chrome，但不是很穩定在FF中 - 有時它會在div呈現之前計算var tw並返回其零寬度。

我該如何同步這些事件，即測量該div已被渲染後的寬度？我無法使用onLoad，因爲在此之前加載了整個DOM。

感謝

來源

2014-03-03 user2723490

圍繞它的一個快速入門就是將'.html'調用放在'setTimeout'中的代碼超時0 –

您可以考慮使用突變框架..它作爲觀察者設計模式工作，併爲您提供通知每當一個節點被添加到dom樹時。 –

你也可以嘗試使用原生js $（'＃'+ divID）[0] .innerHTML = tbl;也許這會讓事情變得更快更穩定。 –

您可以通過呼籲offsetWidth的對象上強制的內容迴流（確保新內容的DOM）。

這裏你的代碼看起來像：

function test(divID){ 
    //some actions - creating the div 'tbl' structure 
    $('#'+divID).html(tbl); 
    $('.page')[0].offsetWidth; // force reflow; 
    var tw = $('#'+divID).width() + 80; 
    $('.page').css("width", tw+"px"); 
}

你不會想這樣做在一個巨大的環路頁面重排是相對昂貴的操作。相反，您可以運行創建div的循環，然後調用offsetWidth，然後使用另一個循環來分配寬度。

有關更多信息，請參閱"Force Reflow" in CSS transitions in Bootstrap。

來源

2014-03-03 23:35:24

我想，「強制迴流」應該在測量寬度之前而不是之後，對吧？ – user2723490

在寬度測量之前或之後，無論「強制迴流」的位置如何，都不起作用。由於DOM尚未呈現，因此它簡單返回寬度爲零。 – user2723490

jQuery的：檢查是否有動態加載DIV呈現

回答

相關問題