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

如果 @import 存在于 css 样式表中，我无法查询 cssRules。 是否符合网络标准？ 或者知道 Firefox 的限制？

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

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

底层对象不支持参数或操作 [打破此错误] var style_rules = document.styleSheets[0].cssRules;

属性 document.styleSheets[0].cssRules 是CSS规则列表 http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList（除了在 IE6-8 中，您应该使用 styleSheets[0].rules 作为 css 规则，使用 styleSheets[0].imports 作为导入）。这个CSSRuleList有一定数量CSSRules http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule在列表中。这些规则可以有不同的类型。例如 @import CSSRule 实现了CSS导入规则 http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSImportRule接口和“正常”样式声明 CSSRule 实现CSS样式规则 http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule界面。 我们可以通过检查 if 来检测 CSSRule 是否是 @import css 规则rule.type == IMPORT_RULE，其中IMPORT_RULE为3。如果是CSSImportRule，我们可以通过获取它的styleSheet属性来获取导入的样式表中的css规则，重复上面的过程。

任何 CSSRule 的可解析文本表示都可以通过获取 cssText 属性来获取：rule.cssText。然而，在 Internet Explorer 6-8 中，我们必须使用rule.style.cssText.

换句话说，我们可以使用以下代码获取样式表中的所有 CSSRule（包括其导入）。我还将一个工作示例放入jsfiddle http://jsfiddle.net/MCcVA/2/。请注意，此代码在 IE6-8 中不起作用。对于这个解决方案，我建议您检查我的解决方案是否有另一个问题here https://stackoverflow.com/questions/10314131/check-if-css-property-has-important-attribute-applied/10324818#10324818.

/**
 * 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);
    }