Question

我在javascript中动态加载了一些style.css。加载样式时，我会做一些取决于样式的计算。代码是这样的：

link = document.createElement('link');
link.href = 'sheety.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
link.onload = function(){
    //some code
    //here, I can't the the correct style sometime.
    //but most of the time, I can get the correct style
    setTimeout(function(){
        //here, I can also get the correct style
    }, 1000);
};

所以，我的问题是：什么时候成功应用了样式？如果我修改元素的位置（宽度，高度），我可以立即获得正确的值，或者我必须等待一段时间让浏览器使用类似setTimeout()函数做某事吗？

我读了一些资源说：call dom.getComputedStyle会导致浏览器重排。我确实称这种方法，但我仍然得到错误的DOM宽度/高度。

当我在chrome中调试JS代码时，我可以看到该样式未在断点处应用（来自chrome开发人员工具中的样式选项卡）。

Answer 1

加载样式表后，会生成CSSOM或CSSObjectModel。与DOM一起，CSSOM由光栅化器栅格化并应用（在Chrome中，由Skia完成）。

当浏览器完成重排或重绘时，可以说样式成功应用。我们可以使用许多技术强制浏览器重绘：

element.hide（）表示（）; #using jQuery
将节点插入DOM 并将其删除。

在similar question中可以更好地解释这些技术。

何时应用动态样式表？

1 个答案: