如何在外部CSS文件中查找规则的数量
How to find the number of rules in an external CSS file?
我会在序言中说这是学校的作业，尽管我上下看了看都找不到答案。我也不是在问整个作业的答案，只是一小部分。
无论如何，任务相对简单使用JS创建网页的三个部分，以不同的方式更改样式
- 第一部分是循环浏览CSS文件中的所有样式
- 第二种方法是随机选择文件中的样式
- 第三种是使用表单让用户选择样式
我知道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>cssRules不支持跨浏览器。也就是说，有些浏览器会识别该属性，有些则不会。还有一些浏览器将使用的rules属性。点击此处阅读更多信息。
实现这一点的一种方法是通过"特征检测"。类似于：
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的乐趣。
检查.rules/.cssRules是否存在，并使用现有的
document.styleSheets[index].rules // Chrome, Firefox, Opera, modern IE
document.styleSheets[index].cssRules // old Internet Explorer
相关文章：
- 正在全局范围中查找JavaScript函数
- Javascript(Angular）从一个对象数组到第二个数组查找值
- 在不使用jquery的情况下查找页面中的所有锚点并附加函数
- es6 相当于下划线查找位置
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何在不传递此信息的情况下查找被调用的元素
- Lodash 从值数组中查找数组中的值
- 如何使用JavaScript查找1和N之间的所有数字的总和
- 使用RegExp查找url中的字符
- 查找元素高度，包括边距
- 用Javascript修改内部标记的CSS规则
- 使用JS查找数组的平均值
- 查找最短和最长日期
- 猫鼬在特定记录中查找嵌套记录
- 使用javascript在MVC中查找网格长度时出错
- BootstrapValidator如何查找字段的规则
- 如何在外部CSS文件中查找规则的数量
- 查找所选元素的所有CSS类规则列表(来自多个样式表)及其活动属性
- 查找特定的CSS @keyframes规则
