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呈现

回答

相关问题