Javascript CSSRules为空_Javascript_Html_Css_Google Chrome_Webkit

Javascript CSSRules为空

javascript html css google-chrome

Javascript CSSRules为空,javascript,html,css,google-chrome,webkit,Javascript,Html,Css,Google Chrome,Webkit,我有一个非常简单的HTML页面，我试图获取#poulet的CSSRules，但是当我访问文档时。样式表[0]。CSSRules我在Chrome v5.0.375.55中遇到了这个错误：未捕获的TypeError:无法读取null的属性“length” 下面是我的代码的样子： HTML文件 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/test.css

我有一个非常简单的HTML页面，我试图获取#poulet的CSSRules，但是当我访问文档时。样式表[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>

可以找到这些文件。我真的需要这方面的帮助，请！！！D:

Chrome使用的是类似IE的

规则[]

数组

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];
    }
}

for（变量i=0；i

我在您的脚本中发现以下错误：

您正在测试类型是否等于

window.CSSRule.WEBKIT\u KEYFRAMES\u RULE

。该属性的值为8，而所需对象的类型为1。快速查看

CSSRule

对象，您可能希望与

window.CSSRule.STYLE\u RULE

进行比较

我找不到属性

名称

，但最终找到了一个属性

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;
}

函数findKeyframesRule（规则）
{
var ss=document.styleSheets；
对于（变量i=0；i


但是要注意我在评论中提到的问题：这只在协议！=文件：“
，
此方法返回包含给定选择器的规则数组-
要在IE中正确工作，选择器测试必须不区分大小写
顺便说一句，Chrome5将使用规则或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（规则）{
var ss=document.styleSheets，L=ss.length，A=[]，R，RL，ru；
var rx=RegExp（'\\b'+rule+'\\b'，'i'）；
对于（变量i=0；i

警报（findRule（'body'）。加入（'\n\n'））
这张便条可能对你有用-
如果我在我的c-drive上的目录中运行它，我就无法读取任何样式表的长度或规则
除非它们与页面位于同一目录中
当从本地主机或internet通过http提供服务时，它运行良好。
只需一句话：出于优化目的，您可以在循环时使用递减，请参阅即使修改了循环，仍不工作。另外，我在这里使用了与webkit夜间版本相同的代码：where is显然使用.cssRules而不是.rules。我也有这个警告，我想这就是造成我所有这些麻烦的原因：资源被解释为脚本，但使用MIME类型的应用程序/x-js传输。从Chrome 5开始，Chrome同时使用规则和cssRules
。我没有收到这个错误，我的Chromium 5.0.375.55只返回null
。非常奇怪：从我的本地Web服务器http://localhost
，我刚刚收到一个警告框，上面写着null
，但是当使用文件：//
在本地运行此文件时，我得到了“uncaughttypeerror:无法读取null的属性'length'。根据Web Inspector的说法，在后一种情况下，ss.length
是未定义的。谢谢，这很有帮助！虽然在我的例子中，我需要window.CSSRule.WEBKIT_KEYFRAMES_规则，但现在我对如何获取规则有了更好的理解。你知道为什么在运行文件协议时它不工作吗？@Stephanie:我不明白：为什么你需要WEBKIT\u关键帧\u规则？这样做将使函数返回null
，而不是我认为您需要的CSSStyleRule对象。此外，这种方式不适用于跨浏览器，而使用STYLE_规则可以让该脚本在Firefox中工作。不幸的是，在使用文件协议时存在更多奇怪的问题。本地访问似乎受到限制（）。我将在几天内对此进行更深入的研究，并提交一份bug报告（如果合适的话）。我在这里发布的脚本只是我实际正在做的一个示例。其全部目的是使用javascript更改动画关键帧，而不是其他内容。该脚本适用于iphone/ipad/ipod touch，所有这些都使用基于webkit的safari。因此，我认为在这种情况下使用WEBKIT_关键帧_规则（性能方面）更明智。虽然我承认样式规则可能更适合于更广泛使用的函数。关于file://
与http://：我也注意到，请参见我对原始问题的第二条评论。我将在几天内对此进行更深入的研究，并在适当的情况下提交一份bug报告。
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;
}

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;
}