何時將樣式表添加到document.styleSheets

Question

我試圖動態地添加使用javascript CSS樣式表規則，類似例子2 這里。

它大部分時間都有效，但似乎有一種競爭條件，有時會導致（至少）Chrome（15.0.874和17.0.933）失敗。 當緩存為空（或已被清除）時，它很少發生。

這就是我能夠將其縮小到的范圍。 首先，我通過將其附加到<head>來加載外部樣式表，然后創建一個新的樣式表（我將在其中添加規則）。 然后我打印document.styleSheets的長度（立即和1秒后）。

$(function() {
    // it doesn't happen if this line is missing.
    $("head").append('<link rel="stylesheet" type="text/css"'+
                     'href="/css/normalize.css" />');

    var stylesheet = document.createElement("style");
    stylesheet.setAttribute("type", "text/css");
    document.getElementsByTagName('head')[0].appendChild(stylesheet);

    var b = $('body');
    b.append(document.styleSheets.length).append('<br/>');
    setTimeout(function() {
        b.append(document.styleSheets.length).append('<br/>');
    }, 1000);
});

（在http://jsfiddle.net/amirshim/gAYzY/13/上播放）

當緩存清除時，它有時打印2然后4 （jsfiddle添加它自己的2個css文件），這意味着它不會立即將任何樣式表添加到document.styleSheets ...但可能等待外部文件加載。

這是預期的嗎？

如果是這樣， MDN上的示例2 （以及其他許多其他內容）是否已損壞？ 從第27行開始：

var s = document.styleSheets[document.styleSheets.length - 1];

可以使用document.styleSheets.length == 0進行評估

請注意，當我不首先加載外部CSS文件時，不會發生這種情況。

Answer 1

如果JavaScript位於CSS下面的頁面中（它幾乎總是如此），HTML解析器必須等待JS執行，直到JS和CSS完全加載和解析，因為JS可能會請求樣式信息（Chrome只會在雖然腳本實際上這樣做了）。 這有效地使得幾乎在所有情況下加載外部CSS都是阻塞的。 當您稍后通過JavaScript插入它們或者頁面中沒有JS'（或者JS被加載非阻塞）時，CSS異步加載意味着它們被加載和解析而不會阻止DOM的解析。 因此，documents.stylesheets計數僅在工作表進入DOM之后才會更新，並且只有在完全加載和解析之后才會發生。

在這種情況下，可能會涉及一些時間差異。 考慮到大多數瀏覽器只有有限數量的管道來加載數據（有些只有兩個像IE6，大多數有6個，有些甚至有12個像IE9），樣式表的加載被添加到隊列的末尾以便加載。 瀏覽器仍然在加載東西，因為你在DOMReady上調用了你的功能。 這導致樣式表在一秒鍾之后沒有被完全加載和解析，因此不會影響document.stylesheets.length。

我在網上遇到的所有樣式表示例都假定dom已完全解析並加載。 OffDOM樣式表甚至不允許插入或檢查規則，因為它們可以具有@import規則並且必須從外部加載，因此對於瀏覽器來說，很難確定何時可以安全地與工作表交互，除非它們'完全加載並解析。 OffDOM樣式表會公開一個空的圖紙屬性，但在將圖紙添加到DOM之前不會讓您與它進行交互。

我總是發現最好動態插入樣式表並執行該表中的所有更改並單獨保留document.stylesheets。 這具有很大的優勢，當您以相同的特異性覆蓋樣式時，由於插入錯誤的工作表，您不會遇到麻煩。 由於document.stylesheets是一個實時nodeList，因此每次調用該函數時，document.stylesheets [2]都可以指向另一個工作表（除非存儲在var中）。 因此，我傾向於使用動態插入的工作表，只對該工作表進行操作。

Answer 2

這應該有所幫助：' 什么時候樣式表真正加載 '

至於'例2'。 如果在調用addStylesheetRules（）時加載樣式表，它會破壞，當然這是在Chrome中。

何時將樣式表添加到document.styleSheets

問題描述

2 個解決方案

解決方案1
4 已采納 2011-11-11 10:27:53

解決方案2
1 2011-11-10 12:15:18

何時將樣式表添加到document.styleSheets

問題描述

2 個解決方案

解決方案1 4 已采納 2011-11-11 10:27:53

解決方案2 1 2011-11-10 12:15:18

解決方案1
4 已采納 2011-11-11 10:27:53

解決方案2
1 2011-11-10 12:15:18