Question

我正在尝试使用document.styleSheets数组在样式表中读取CSS选择器。它适用于<link>和<style>标记，但是当我在@import中使用<style>时，它不会显示在数组中 - 仅作为cssRule（样式为Safari 3和FF 3中的“Undefined”。

那么：我如何在@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，然后使用@import循环查看了for..in - 规则的属性，那么您可以自己轻松地弄清楚这一点 - 这是我做了什么...

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

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

3 个答案: