如何使用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