Question

我经常发现，如果我在javascript中创建或重新显示DOM节点，则CSS引擎不会重新计算父容器的大小。这种情况发生在Firefox和Chrome中。

例如，body可能保持相同的大小，而新内容溢出底部。如果我调整窗口大小，身体会增长，但它不会“锁定”到正确的大小，直到窗口的大小至少与body一样大。

有没有办法在Javascript中触发完整的布局重新计算？

Answer 1

我可以通过以下方式触发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);
});

Answer 2

您可以通过将CSS样式设置为无关值来触发JavaScript重绘，例如

document.body.style.zIndex = 1;

Answer 3

是。我倾向于在className元素上添加随机<html>，使用：

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

创建：

<html class="reflow_1483757400611">

通过camposat.tv

尝试从Android浏览器4到智能电视的所有内容进行测试

如何在Javascript DOM更新后触发CSS布局重新计算？

3 个答案: