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

Discussion in 'Javascript' started by Jake Barnes, Apr 10, 2009.

  1. Jake Barnes

    Jake Barnes Guest

    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.
     
    Jake Barnes, Apr 10, 2009
    #1
    1. Advertising

  2. Jake Barnes wrote:
    > 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
     
    Garrett Smith, Apr 10, 2009
    #2
    1. Advertising

  3. Jake Barnes

    rf Guest

    Re: how do I get the style sheets (or style object) of the whole document?

    Jake Barnes wrote:
    > 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.

    --
    Richard.
     
    rf, Apr 10, 2009
    #3
  4. Jake Barnes

    RobG Guest

    On Apr 10, 3:02 pm, Jake Barnes <> wrote:
    > 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).


    --
    Rob
     
    RobG, Apr 10, 2009
    #4
  5. Am Fri, 10 Apr 2009 06:09:22 +0000 schrieb rf:

    > Jake Barnes wrote:
    >> 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.



    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


    --
    http://www.gregorkofler.com
    http://web.gregorkofler.com - vxJS, a JS lib in progress
     
    Gregor Kofler, Apr 10, 2009
    #5
  6. On Apr 10, 2:09 am, "rf" <> wrote:
    > JakeBarnes wrote:
    > > 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.



    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, Apr 12, 2009
    #6
  7. 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?
     
    Lawrence Krubner, Apr 12, 2009
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Using external style sheets

    Kevin Spencer, Jul 9, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    376
    Kevin Spencer
    Jul 9, 2003
  2. PJ

    CSS Style Sheets

    PJ, Aug 21, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    400
    Vincent V
    Aug 22, 2003
  3. Zoury

    CSS Style Sheets

    Zoury, Aug 21, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    448
    Zoury
    Aug 21, 2003
  4. Replies:
    1
    Views:
    815
    Bertilo Wennergren
    Nov 24, 2003
  5. Carl Corcoran
    Replies:
    1
    Views:
    294
    Bob Barrows
    Nov 12, 2003
Loading...

Share This Page