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

Question

我正在尝试使用document.styleSheets数组在样式表中读取CSS选择器。 它适用于<link>和<style>标签，但当我在<style>使用@import时它不会出现在数组中 - 仅作为cssRule（样式在Safari 3和FF 3中为“未定义”） ）。

那么：我如何在@imported文件中解析css？

Answer 1

假设我们的文档在第一个样式表中包含@ import-rule作为第一个规则，这里是符合标准的浏览器的代码

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

和我们所有心爱的IE的特例

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

如果您已经阅读了我已经链接到的quirksmode.org的页面，然后使用for..in循环走了@import -rule的属性，那么你可以很容易地想出这个 - 这就是我做的...

PS：我还不能对其他答案发表评论，但如果可以的话，我会适当地嘲笑你;）

Answer 2

查看此页面 - 在quirksmode.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）...

如果我完全错过了一些明显的东西，请随意嘲笑我...... :)

Answer 3

优秀的页面，包含大量样式表解析信息： http ： //www.howtocreate.co.uk/tutorials/javascript/domstylesheets