何時應用動態樣式表？

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.getComputedStyle 。 我確實稱這種方法，但我仍然得到錯誤的DOM寬度/高度。

當我在chrome中調試JS代碼時，我可以看到該樣式未在斷點處應用（來自chrome developer tools中的樣式選項卡）。

Answer 1

加載樣式表后，將生成CSSOM或CSSObjectModel 。 與DOM一起，CSSOM由光柵化器光柵化並應用（在Chrome中，由Skia完成）。

當瀏覽器完成重排或重繪時，可以說樣式成功應用。 我們可以使用許多技術強制瀏覽器重繪：

1. element.hide（）表示（）; #using jQuery
2. 將節點插入DOM並將其刪除。

在類似的問題中可以更好地解釋這些技術。