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

Question

我正在尝试使用 document.styleSheets 在我的样式表中读取 CSS 选择器大批。它适用于 <link>和 <style>标签，但是当我使用 @import在 <style> 里面它不会出现在数组中 - 仅作为 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;

如果您阅读了 the page at quirksmode.org，您自己就可以很容易地弄明白这一点。我已经链接到它，然后使用 for..in 循环遍历 @import 规则的属性 - 这就是我所做的...

PS:我还不能评论其他答案，但如果可以的话，我会适本地 mock 你；)