Question

我动态创建一个div，然后根据div的宽度改变css属性：

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。

由于

Answer 1

您可以通过调用对象上的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。

jQuery：检查是否呈现了动态加载的div

1 个答案: