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

Question

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

例如，当新内容溢出底部时，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);
});