How to find the number of rules in an external CSS file?
Question
I will preface by saying that this is for a school assignment, though I have looked up and down and have not been able to find an answer. I'm also not asking for the answer to the whole assignment, just a small portion.
Anyway, the assignment is relatively simple. Create three sections of a webpage that change styles in different ways using JS.
- The first section is to cycle through all of the styles in a CSS file.
- The second is to randomly select the styles in the file.
- The third is to use a form for the user to select the styles.
I know how many rules are in the CSS file, but I'm trying to code as if I don't.
How can I find how many rules are in the file? Every time I try using document.styleSheets[0].cssRules.length I get: Uncaught TypeError: Cannot read property 'length' of null .
What am I doing wrong here? What is the correct syntax for this?
EDIT: I've attached the code for the HTML, CSS and JS. I feel like I am missing something really simple.
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>
2 answers
solution1
1 2015-11-22 06:05:27
cssRules does not have cross browser support. Meaning, some browsers will recognize that property, and some will not. There is also a rules property that some browsers will use. Read more here .
One way to do this is through "feature detection". Something like:
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);
In case it's not obvious, the (boolExpression)?truePart:falsePart; is a way in javascript to easily check an expression. In this case, putting firstsheet.cssRules into the parenthesis will coerce it into a boolean forcing JS to return true if the property exists, and false if it doesn't. This makes the assumption that if cssRules doesn't exist, then rules is the array to use.
Also you can put the rules request into a function:
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);
Welcome to the joys of working with javascript in a cross browser environment.
solution2
0 2015-11-22 06:03:28
Check for the existance for .rules / .cssRules and use the existing one:
document.styleSheets[index].rules // Chrome, Firefox, Opera, modern IE
document.styleSheets[index].cssRules // old Internet Explorer
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.