J
Jake Barnes
I have a style sheet with this rule in it:
li#patterns em, li#apparel em, li#tapes em, li#appliques em,
li#closures em, li#mend em, li#decor em, li#sewing em, li#quilting em,
li#ribbon em, li#crochet em, li#kits em, li#products em{
background: url(Simplicity Home/bg-nav.png) no-repeat;
cursor: pointer;
}
I want to get the background image for this, and for all other rules
that have background images.
I have the following code to loop through all the rules of all the
style sheets:
var styleSheets = document.styleSheets;
var stringOfAllStyleRules = "";
for (var i=0; i < styleSheets.length; i++) {
var thisStyleSheet = styleSheets;
if (thisStyleSheet.cssRules) {
var listOfStyleSheetRules = thisStyleSheet.cssRules;
}
if (thisStyleSheet.rules) {
var listOfStyleSheetRules = thisStyleSheet.rules;
}
if (typeof listOfStyleSheetRules == "undefined") {
window.status = "No style rules could be found";
} else {
for (var r=0; r < listOfStyleSheetRules.length; r++) {
var thisRule = listOfStyleSheetRules[r];
if (typeof thisRule["style"] != "undefined") {
var styleObject = thisRule["style"];
var cssText = thisRule["cssText"];
var backgroundImageUrl = styleObject["backgroundImage"];
// if (backgroundImageUrl != "") {
stringOfAllStyleRules += backgroundImageUrl;
stringOfAllStyleRules += "<br /> \n";
stringOfAllStyleRules += cssText;
stringOfAllStyleRules += "<br /><br /> \n";
// }
}
}
}
}
if (stringOfAllStyleRules) document.getElementById("recently-viewed-
items").innerHTML = stringOfAllStyleRules;
The last line is simply so I can see the output on screen. This is how
the code renders the above rule:
li#patterns em, li#apparel em, li#tapes em, li#appliques em,
li#closures em, li#mend em, li#decor em, li#sewing em, li#quilting em,
li#ribbon em, li#crochet em, li#kits em, li#products em { cursor:
pointer; }
The cursor is still there, but the background is gone. Why?
I'm testing this code on FireFox 3.0.5
li#patterns em, li#apparel em, li#tapes em, li#appliques em,
li#closures em, li#mend em, li#decor em, li#sewing em, li#quilting em,
li#ribbon em, li#crochet em, li#kits em, li#products em{
background: url(Simplicity Home/bg-nav.png) no-repeat;
cursor: pointer;
}
I want to get the background image for this, and for all other rules
that have background images.
I have the following code to loop through all the rules of all the
style sheets:
var styleSheets = document.styleSheets;
var stringOfAllStyleRules = "";
for (var i=0; i < styleSheets.length; i++) {
var thisStyleSheet = styleSheets;
if (thisStyleSheet.cssRules) {
var listOfStyleSheetRules = thisStyleSheet.cssRules;
}
if (thisStyleSheet.rules) {
var listOfStyleSheetRules = thisStyleSheet.rules;
}
if (typeof listOfStyleSheetRules == "undefined") {
window.status = "No style rules could be found";
} else {
for (var r=0; r < listOfStyleSheetRules.length; r++) {
var thisRule = listOfStyleSheetRules[r];
if (typeof thisRule["style"] != "undefined") {
var styleObject = thisRule["style"];
var cssText = thisRule["cssText"];
var backgroundImageUrl = styleObject["backgroundImage"];
// if (backgroundImageUrl != "") {
stringOfAllStyleRules += backgroundImageUrl;
stringOfAllStyleRules += "<br /> \n";
stringOfAllStyleRules += cssText;
stringOfAllStyleRules += "<br /><br /> \n";
// }
}
}
}
}
if (stringOfAllStyleRules) document.getElementById("recently-viewed-
items").innerHTML = stringOfAllStyleRules;
The last line is simply so I can see the output on screen. This is how
the code renders the above rule:
li#patterns em, li#apparel em, li#tapes em, li#appliques em,
li#closures em, li#mend em, li#decor em, li#sewing em, li#quilting em,
li#ribbon em, li#crochet em, li#kits em, li#products em { cursor:
pointer; }
The cursor is still there, but the background is gone. Why?
I'm testing this code on FireFox 3.0.5