how do I get the style sheets (or style object) of the wholedocument?

[Jake Barnes]

I know I can do this:

document.getElementById("id").style.property="value"

but how can I find all the styles that have been loaded?

Onload, I want to loop through every rule defined in the style sheets
of a page, and find every hover pseudo class, and preload all the
images defined therein.

 

[Garrett Smith]

I know I can do this:

document.getElementById("id").style.property="value"

but how can I find all the styles that have been loaded?

Onload, I want to loop through every rule defined in the style sheets
of a page, and find every hover pseudo class, and preload all the
images defined therein.

Possible, but if the point is to speed things up, doing that would have
the opposite effect.

Garrett

 

[rf]

I know I can do this:

document.getElementById("id").style.property="value"

but how can I find all the styles that have been loaded?

Onload, I want to loop through every rule defined in the style sheets
of a page, and find every hover pseudo class, and preload all the
images defined therein.

http://wellstyled.com/css-nopreload-rollovers.html

Be sure to follow the "example" link.

No preloading required. No messy traversal of stylesheets required.

 

[RobG]

I know I can do this:

document.getElementById("id").style.property="value"

but how can I find all the styles that have been loaded?

Play with document.styleSheets, which belongs to interface
DocmentStyle:

<URL: http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets

You can use it to get each style sheet:

<URL: http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet
From there you go over all the style rules. There are differences
between browsers, search the archives.

Onload, I want to loop through every rule defined in the style sheets
of a page, and find every hover pseudo class, and preload all the
images defined therein.

Probably a waste of time, there are better strategies (see other
replies).

 

[Gregor Kofler]

Am Fri, 10 Apr 2009 06:09:22 +0000 schrieb rf:

http://wellstyled.com/css-nopreload-rollovers.html

Be sure to follow the "example" link.

No preloading required. No messy traversal of stylesheets required.

The (IMO) huge problem with this solution: The elements require a fixed
(pixel-)size (depending on the background image either height or width),
which makes flexible layouts impossible. Just try to increase the font-
size here:
http://wellstyled.com/files/css-nopreload-rollovers/example.html

Gregor

 

[Lawrence Krubner]

http://wellstyled.com/css-nopreload-rollovers.html

Be sure to follow the "example" link.

No preloading required. No messy traversal of stylesheets required.

No, that doesn't work. The designer working on this project used that
trick where it was appropriate (nav bar, some rollovers) but we are
now dealing with situations where that trick can not easily be used.
In particular, some items of clothing have the price appear on
rollover, the rollover is an image that has text added dynamically by
PHP, and she's using the replace-the-whole-damn-image approach to deal
with the problem IE 6 has with transparent pngs.

But thanks.

 

[Lawrence Krubner]

I seem unable to get the data I want, at least on FireFox, where I'm
currently testing the script. This is the code that I currently have
(it runs onload):

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 backgroundImageUrl = styleObject["backgroundImage"];
if (backgroundImageUrl != "") {
stringOfAllStyleRules += backgroundImageUrl;
stringOfAllStyleRules += "<br /> \n";
}
}
}
}
}
if (stringOfAllStyleRules) document.getElementById("recently-viewed-
items").innerHTML = stringOfAllStyleRules;


That final line, where I write the data to recently-viewed-items, is
just so that I can see what is going on. Once I've got the images that
I want, I'll do something more interesting.

However, I'm not getting the URLs that I want. This is all I get:


url(Simplicity%20Home/bg-body.jpg)
none
none
none
none
url(../img/icon-envelope-on.gif)
url(../img/icon-envelope.gif)
url(../img/icon-mobile-on.gif)
url(../img/icon-mobile.gif)


Meanwhile, the style sheets have rules such as this:

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;
}
/*Patterns*/
body.patterns li#patterns em{
background: url(Simplicity Home/bg-nav-patterns.png) no-repeat;
}
body.patterns li#patterns:hover em{
background: url(Simplicity Home/bg-nav-patterns.png) no-repeat;
background-position: 0 -46px;
}


None of those background images are being discovered by my script.
What am I doing wrong?