Javascript Firefox-如果样式表中存在@import，则无法查询cssRules-错误或预期行为？_Javascript_Css_Firefox_Browser

Javascript Firefox-如果样式表中存在@import，则无法查询cssRules-错误或预期行为？

javascript css firefox browser

Javascript Firefox-如果样式表中存在@import，则无法查询cssRules-错误或预期行为？,javascript,css,firefox,browser,Javascript,Css,Firefox,Browser,如果css样式表中存在@import，我无法查询cssRules。它是否符合web标准？或者你知道Firefox的局限性吗注意：我正在从同一个域导入css文件 var style_rules = document.styleSheets[0].cssRules; console.log(style_rules); 基础对象不支持参数或操作 [Break On This Error]var style_rules=document.styleSheets[0].cssRules 似乎工作正

如果css样式表中存在@import，我无法查询cssRules。它是否符合web标准？或者你知道Firefox的局限性吗

注意：我正在从同一个域导入css文件

var style_rules = document.styleSheets[0].cssRules;
console.log(style_rules);

基础对象不支持参数或操作

[Break On This Error]var style_rules=document.styleSheets[0].cssRules

似乎工作正常，尽管我只使用不存在的文件进行了测试。

更新1：我想我发现了你为什么有问题。如果cssRule是导入，则必须解析其样式表属性的cssRules。使用Firefox的Firebug插件很容易发现这一点

这是test.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>

更新2：根据CSSImportRule，对象最终具有样式表属性。请使用我的示例亲自检查，但请记住：

如果尚未加载样式表，则此属性的值为null

在加载此属性之前，您可能希望延迟代码。

属性文档。样式表[0]。cssRules是一个（除了在IE6-8中，您应该在IE6-8中使用样式表[0]。css规则和样式表的规则[0]。导入）。此CSSRuleList在列表中有一定数量的。这些规则可以是不同的类型。例如，@import CSSRule实现接口，而“normal”样式声明CSSRule实现接口。我们可以通过检查

rule.type==import\u rule

，其中import\u rule为3，来检测CSSRule是否为@import css规则。如果它是CSSImportRule，我们可以获取它的样式表属性，以获取导入的样式表中的css规则，并重复上述过程

任何CSSRule的可解析文本表示都可以通过获取cssText属性来获得：

rule.cssText

。然而，在InternetExplorer6-8中，我们必须使用

rule.style.cssText

换句话说，我们可以使用以下代码获得样式表中的所有CSSRule（包括其导入）。我还将一个工作样本放入了一个容器中。请注意，此代码在IE6-8中不起作用。对于此解决方案，我建议您检查我的解决方案，以了解其他问题

/**
*获取应用于htmlNode的样式表的css规则。意思是它的阶级
*它的id和标签。
*@param CSSStyleSheet样式表
*/
函数getCssRules（样式表）{
if（！样式表）
返回null；
var cssRules=新数组（）；
if（styleSheet.cssRules）{
var currentCssRules=styleSheet.cssRules；
//Import语句始终位于css文件的顶部。
对于（var i=0；i

丹尼斯和弗里德里希需要参加阅读理解课程。如果

document.styleSheets[0].cssRules

失败，那么显然他们的代码在

If（styleSheet.cssRules）{

和

console.log（document.styleSheets[0].cssRules[0].styleSheet.cssRules[0].cssText）；

上也会失败。说真的，发布一个你没有考虑过的答案有什么用

这样一来，根据您提供的有限信息，我的客户猜测您将得到一个DOMException“InvalidAccessError”，因为当JavaScript代码运行时，样式表尚未完全从服务器传输到您的计算机

如果是这种情况，则需要处理拥有样式表的HTML元素的加载事件

try
{
  var rules = styleSheet.cssRules;
}
catch(x)
{
  if(x instanceof DOMException && x.name == "InvalidAccessError")
    styleSheet.ownerNode.addEventListener("load", functionToRunWhenItLoads);
}

您可以根据自己的目的修改上述代码。但是，请注意，在样式表完成加载之前，某些浏览器甚至不会将样式表添加到

文档中。样式表

，因此您可能仍然会错过它。您可能需要处理窗口对象的加载事件来处理这种情况，或者最好不要这样做首先检查

document.styleSheets

。

可能重复的//（编辑）错误，我看不懂，它不是重复的，但是

/**
 * Get the css rules of a stylesheet which apply to the htmlNode. Meaning its class
 * its id and its tag.
 * @param CSSStyleSheet styleSheet
 */
function getCssRules(styleSheet) {
    if ( !styleSheet )
        return null;

    var cssRules = new Array();
    if (styleSheet.cssRules) {
        var currentCssRules = styleSheet.cssRules;
        // Import statement are always at the top of the css file.
        for ( var i = 0; i < currentCssRules.length; i++ ) {
            // cssRules contains the import statements.
            // check if the rule is an import rule.
            if ( currentCssRules[i].type == 3 ) {
                // import the rules from the imported css file.
                var importCssRules = getCssRules(currentCssRules[i].styleSheet);
                if ( importCssRules != null ) {
                    // Add the rules from the import css file to the list of css rules.
                    cssRules = addToArray(cssRules, importCssRules);
                }
                // Remove the import css rule from the css rules.
                styleSheet.deleteRule(i);
            }
            else {
                // We found a rule that is not an CSSImportRule
                break;
            }
        }
        // After adding the import rules (lower priority than those in the current stylesheet),
        // add the rules in the current stylesheet.
        cssRules = addToArray(cssRules, currentCssRules);
    }


    return cssRules;
}

/**
 * Since a list of rules is returned, we cannot use concat. 
 * Just use old good push....
 * @param CSSRuleList cssRules
 * @param CSSRuleList cssRules
 */
function addToArray(cssRules, newRules) {
    for ( var i = 0; i < newRules.length; i++ ) {
        cssRules.push(newRules[i]);
    }
    return cssRules;
}

/**
 * Finds all CSS rules.
 */
function getCSSRules() {
    var cssRules = new Array();

    // Loop through the stylesheets in the html document.
    for ( var i = 0; i < document.styleSheets.length; i++ ) {
        var currentCssRules = getCssRules(document.styleSheets[i])
        if ( currentCssRules != null )
            cssRules.push.apply(cssRules, currentCssRules);
    }

    return cssRules;
}

// An array of all CSSRules.
var allCSSRules = getCSSRules();
    for ( var i = 0; i < allCSSRules.length; i++ ) {
        console.log(allCSSRules[i].cssText);
    }

try
{
  var rules = styleSheet.cssRules;
}
catch(x)
{
  if(x instanceof DOMException && x.name == "InvalidAccessError")
    styleSheet.ownerNode.addEventListener("load", functionToRunWhenItLoads);
}