P K*_*P K 6 javascript css browser firefox
如果css样式表中存在@import,我无法查询cssRules.它是否符合网络标准?或者知道Firefox的局限性?
注意:我从同一个域导入css文件.
var style_rules = document.styleSheets[0].cssRules;
console.log(style_rules);
Run Code Online (Sandbox Code Playgroud)
底层对象不支持参数或操作[Break On This Error] var style_rules = document.styleSheets [0] .cssRules;
似乎工作正常,尽管我只使用不存在的文件进行了测试。 在 Firefox 8 上运行的 jsfiddle 示例
更新1:我想我找到了你遇到问题的原因。如果 cssRule 是导入的,则必须解析其 StyleSheet 属性的 cssRules。使用 Firefox 的 Firebug Addon 很容易发现这一点。
这是测试.html
<html>
<head>
<style type="text/css">
@import 'test.css';
</style>
</head>
<body>
<div class="random5923">showing with border</div>
<script type="text/javascript">
console.log(document.styleSheets);
console.log(document.styleSheets[0].cssRules[0].styleSheet.cssRules[0].cssText);
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
以及相应的test.css
.random5923 {
border : 1px solid black;
}
Run Code Online (Sandbox Code Playgroud)
更新2:根据http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSImportRule CSSImportRule 对象明确具有 styleSheet 属性。请使用我的示例来亲自检查这一点,但请记住这一点:
如果样式表尚未加载,则该属性值为 null
您可能希望延迟代码,直到加载此属性。