如何使用Javascript解析@import樣式表

Question

我正嘗試使用document.styleSheets數組讀取我的樣式表中的CSS選擇器。它適用於<link>和<style>標籤，但在<style>中使用@import時，它不會顯示在數組中 - 僅作爲cssRule（樣式爲Safari 3和FF 3中的「未定義」）。

因此：如何解析@imported文件中的css？

Answer 1

假設我們的文件包含一個@進口規則作爲第一個樣式表第一條規則，下面是標準的代碼兼容的瀏覽器

document.styleSheets[0].cssRules[0].styleSheet.cssRules; 

，併爲我們所有的心愛的IE

document.styleSheets[0].imports[0].rules; 

的特殊情況

如果您已經閱讀了我已經鏈接到的the page at quirksmode.org，然後用for..in循環走過@import規則的屬性，那麼您可以很容易地想到這一點 - 這就是我所做的。 。

PS：我可以在其他解答，如果我不能發表評論，但是，我會適當地嘲笑你;）

Answer 2

查看本頁面 - 這進一步指向這一項上怪異模式.ORG。

謝謝，但我已經嘗試過了...... Quirksmode示例永遠不會分析使用@import嵌入的樣式表。

如果我有這樣的HTML/CSS：

<link rel="stylesheet" type="text/css" href="css/test1.css" /> 

<style type="text/css"> 

    @import url('css/test2.css'); 

    div { 
     color: blue; 
    } 

</style> 

...然後document.styleSheets.length爲2（鏈接標籤和風格標籤）。通過@import鏈接的CSS文件將作爲

document.styleSheets[1].cssRules[0]. 

換句話說，一個CSS規則。這也可以在您提到的Quirksmode頁面上看到，Christoph。我可以得到它的cssText（「@import url（'css/test2.css'）;」）但我不知道如何解析文件中的CSS（test2.css）...

If我已經完全錯過了一些明顯的這裏，隨意調侃我... :)

Answer 3

優秀的網頁，有很多樣式的解析信息：http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets