Question

我有这个非常简单的HTML页面，我正在尝试获取#poulet的CSSRules，但是当我访问documents.styleSheets [0] .cssRules时，我在Chrome v5.0.375.55中收到此错误：
未捕获的TypeError：无法读取null的属性'length'

以下是我的代码：

HTML文件

<!DOCTYPE html> 
<html lang="en"> 
<head>
<link rel="stylesheet" href="css/test.css" type="text/css" />
<script type="text/javascript" src="js/test.js"></script>
<title>Mozilla</title>
<script>
window.onload = function(){
    var test = findKeyframesRule('poulet');
    alert(test);
}
</script>
</head>
<body>
    <div id="poulet">
        allo
    </div>
</body>
</html>

JS FILE

function findKeyframesRule(rule)
{
    var ss = document.styleSheets;

    for (var i = 0; i < ss.length; ++i)
    {       
        for (var j = 0; j < ss[i].cssRules.length; ++j)
        {
            if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
                return ss[i].cssRules[j];
        }
    }
    return null;
}

CSS FILE

html, body {
    background: #cccccc;
}

#poulet{
    border: 10px solid pink;
}

可以找到文件here。我真的需要帮助，请!!! d：

Answer 1

我在你的脚本中发现了这些错误：

您正在测试类型等于window.CSSRule.WEBKIT_KEYFRAMES_RULE。该属性的值为8，而所需的对象的类型为1.快速查看CSSRule对象显示您可能希望与window.CSSRule.STYLE_RULE进行比较。
我找不到属性name，但最终找到了包含selectorText的属性#poulet。

更正后，脚本会显示：

function findKeyframesRule(rule)
{
    var ss = document.styleSheets;

    for (var i = 0; i < ss.length; ++i)
    {
        for (var j = 0; j < ss[i].cssRules.length; ++j)
        {
            if (ss[i].cssRules[j].type == window.CSSRule.STYLE_RULE && ss[i].cssRules[j].selectorText == '#'+rule)
                return ss[i].cssRules[j];
        }
    }
    return null;
}

但请注意我在评论中提到的问题：这只适用于protocol != "file:"，

Answer 2

此方法返回包含给定选择器的规则数组 -

要正确使用IE，选择器测试必须不区分大小写。

顺便说一下，Chrome 5可以使用规则或cssRules。

function findRule(rule){
    var ss= document.styleSheets, L= ss.length, A= [], R, RL, ru;
    var rx= RegExp('\\b'+rule+'\\b','i');
    for(var i= 0; i < L; ++i){
        R= ss[i].cssRules || ss[i].rules,
        RL= R.length;
        while(RL){
            ru= R[--RL];
            if(rx.test(ru.selectorText)){
                A.unshift(ru.selectorText+'{'+ru.style.cssText+'}');
            }
        }
    }
    return A;
}

<强>警报（findRule（ '主体'）。加入（ '\ n \ n'））

注意 - 可能对您有用 -

如果我在我的驱动器上的目录中运行它，我无法读取任何styleSheet的长度或规则除非它们与页面位于同一目录中。

通过来自localhost或互联网的http-提供服务时运行正常。

Answer 3

Chrome使用{IE}等rules[]数组。

document.styleSheets[0].rules.length

所以修改你的循环：

for (var i = 0; i < ss.length; ++i)
{       
    var rules = ss[i].cssRules;
    if (!rules)
        rules = ss[i].rules;

    for (var j = 0; j < rules.length; ++j)
    {
        if (rules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && rules[j].name == rule)
            return rules[j];
    }
}

CSSRules是空的

3 个答案: