我有一个非常简单的HTML页面，并且尝试获取#poulet的CSSRules，但是当我访问document.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文件
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文件
html, body {
background: #cccccc;
}
#poulet{
border: 10px solid pink;
}
这些文件可以在here中找到。我真的需要这方面的帮助! D:
最佳答案
我在您的脚本中发现了以下错误:
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:"时，