我将在序言中说这是一个学校作业，虽然我上下打量而且找不到答案。我也没有要求整个任务的答案，只是一小部分。
无论如何，作业相对简单。 创建网页的三个部分，使用JS以不同方式更改样式。
我知道CSS文件中有多少规则，但我尝试编码就好像我没有。
如何找到文件中有多少规则？每当我尝试使用document.styleSheets[0].cssRules.length时，我都会得到：Uncaught TypeError: Cannot read property 'length' of null。
我在这里做错了什么？这个的正确语法是什么？
编辑：我已经附加了HTML，CSS和JS的代码。我觉得我错过了一些非常简单的东西。
function cyclingStylize(){
var styleRules = document.styleSheets[0].cssRules.length;
for (var i = 0; i < styleRules; i++){
var myStyle = document.styleSheets[0].cssRules[i];
document.getElementById('MessageCell1').style.cssText = myStyle;
}
setTimeout("cyclingStylize()", 1500);
return;
}.myStyle1 {color:black; font-family:Arial; font-size:12; background-color:green}
.myStyle2 {color:black; font-family:Arial; font-size:18; background-color:red}
.myStyle3 {color:black; font-family:Arial; font-size:24; background-color:blue}
.myStyle4 {color:black; font-family:Arial; font-size:30; background-color:white}
.myStyle5 {color:red; font-family:Verdana; font-size:12; background-color:yellow}
.myStyle6 {color:red; font-family:Verdana; font-size:18; background-color:green}
.myStyle7 {color:red; font-family:Verdana; font-size:24; background-color:white}
.myStyle8 {color:red; font-family:Verdana; font-size:30; background-color:blue}
.myStyle9 {color:green; font-family:Courier; font-size:12; background-color:white}
.myStyle10 {color:green; font-family:Courier; font-size:18; background-color: red}
.myStyle11 {color:green; font-family:Courier; font-size:24; background-color:yellow}
.myStyle12 {color:green; font-family:Courier; font-size:30; background-color: purple}
.myStyle13 {color:blue; font-family:Times; font-size:12; background-color:yellow}
.myStyle14 {color:blue; font-family:Times; font-size:18; background-color:white}
.myStyle15 {color:blue; font-family:Times; font-size:24; background-color:red}
.myStyle16 {color:blue; font-family:Times; font-size:30; background-color:green}
.myStyle17 {color:white; font-family:Helvetica; font-size:12; background-color:black}
.myStyle18 {color:white; font-family:Helvetica; font-size:18; background-color:green}
.myStyle19 {color:white; font-family:Helvetica; font-size:24; background-color:red}
.myStyle20 {color:white; font-family:Helvetica; font-size:30; background-color:blue}<html>
<head>
<meta charset="utf-8" />
<title>Style Viewer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="style.js"></script>
</head>
<body onload="cyclingStylize()">
<table align="center" border="1" bordercolor="black">
<tbody>
<tr>
<td align="center">
<font size="3"><b>STYLE CLASS VIEWER</b></font>
</td>
</tr>
<tr>
<td id="MessageCell1" align="center" height="50" width="400" class="myStyle1">
<div id="MessageText">
Hello World Wide Web!
<div>
</div></div></td>
</tr>
</tbody></table>
<hr>
<table align="center" border="1" bordercolor="black">
<tbody><tr>
<td align="center">
<font size="3"><b>STYLE CLASS VIEWER</b></font>
</td>
</tr>
<tr>
<td id="MessageCell2" align="center" height="50" width="400" class="myStyle1">
<div id="MessageText">
Hello World Wide Web!
<div>
</div></div></td>
</tr>
</tbody></table>
<hr>
<form name="StyleForm">
<table align="center" border="0">
<tbody><tr><td>
<table align="center" border="1" bordercolor="black">
<tbody><tr>
<td align="center">
<font size="3"><b>STYLE CLASS VIEWER</b></font>
</td>
</tr>
<tr>
<td id="MessageCell3" align="center" height="50" width="400" class="myStyle1">
<div id="MessageText">
Hello World Wide Web!
<div>
</div></div></td>
</tr>
</tbody></table>
</td></tr>
<tr><td>
<p>
</p><h4>Select Font Color:</h4>
<font face="Courier New">
<input name="color" value="red" type="radio">red
<input name="color" value="black" type="radio">black
<input name="color" value="blue" type="radio">blue
<input name="color" value="green" type="radio">green
<input name="color" value="white" type="radio">white
</font>
<p></p>
</td></tr>
<tr><td>
<p>
</p><h4>Select Font Family:</h4>
<font face="Courier New">
<input name="family" value="Arial" type="radio">Arial
<input name="family" value="Verdana" type="radio">Verdana
<input name="family" value="Courier" type="radio">Courier
<input name="family" value="Times" type="radio">Times
<input name="family" value="Helvetica" type="radio">Helvetica
</font>
<p></p>
</td></tr>
<tr><td>
<p>
</p><h4>Select Font Size:</h4>
<font face="Courier New">
<input name="sizes" value="12" type="radio">12
<input name="sizes" value="18" type="radio">18
<input name="sizes" value="24" type="radio">24
<input name="sizes" value="30" type="radio">30
</font>
<p></p>
</td></tr>
<tr><td>
<p>
</p><h4>Select Background Color:</h4>
<font face="Courier New">
<input name="background" value="red" type="radio">red
<input name="background" value="blue" type="radio">blue
<input name="background" value="green" type="radio">green
<input name="background" value="black" type="radio">black
<input name="background" value="white" type="radio">white
</font>
<p></p>
</td></tr>
<tr><td>
<input type="button" value="Change Style" onclick="userStylize()">
</td></tr>
</tbody></table>
</form>
</body>
</html>
答案 0 :(得分：1)
cssRules没有跨浏览器支持。意思是，有些浏览器会识别该属性，有些则不会。某些浏览器还会使用rules属性。 Read more here
实现此目的的一种方法是通过“特征检测”。类似的东西：
var rules = []; //default to empty array
var firstsheet = null;
//check for any available styleSheets
if (document.styleSheets && document.styleSheets.length > 0) {
firstsheet = document.styleSheets[0];
//see which array is available in this browser
rules = (firstsheet.cssRules) ? firstsheet.cssRules : firstsheet.rules;
//^^^^^The feature detection line, detecting cssRules, and returning it or rules
}
//alert the length
alert(rules.length);
如果不明显，(boolExpression)?truePart:falsePart;是javascript中一种轻松检查表达式的方法。在这种情况下，将firstsheet.cssRules放入括号中会将其强制转换为布尔值，强制JS在属性存在时返回true，如果不存在则返回false。这假设如果cssRules不存在，则rules是要使用的数组。
您也可以将规则请求放入函数中：
function getSheetRules(sheetIndex) {
var rules = []; //default to empty array
var sheet = null;
//check for any available styleSheets
if (document.styleSheets && document.styleSheets.length > 0) {
sheet = document.styleSheets[sheetIndex];
//see which array is available in this browser
rules = (sheet.cssRules) ? sheet.cssRules : sheet.rules;
}
return rules;
}
var rules = getSheetRules(0);
//alert the length
alert(rules.length);
欢迎来到跨浏览器环境中使用javascript的乐趣。
答案 1 :(得分：0)
检查.rules / .cssRules的存在并使用现有的
document.styleSheets[index].rules // Chrome, Firefox, Opera, modern IE
document.styleSheets[index].cssRules // old Internet Explorer