SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing All Instances of a CSS Class

    Hello,
    I'm wondering how I could change the style attributes of all instances of a class on my page using Javascript, so that I can hide multiple divs on my page that have the "detail_box" class. I tried using this, but it didn't work when I tried it on IE 6. Does anyone know of a cross-browser way to do this?
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try this link:

    http://www.wdvl.com/Authoring/DHTML/...ing_rules.html

    This shows how to change stylesheet rules for a tag, class, ID, whatever.

    Hope this helps!

    --Vinnie

  3. #3
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,
    but that doesn't seem to be working for me. The error I get says "document.stylesheets.0 is not an object". Could this possibly have something to do with using an @import statement to load my stylesheet?
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Remember that Javascript is case sensitive!
    Code:
    document.styleSheets[0].blah
    If that doesn't work, then maybe it is the @import statement, but I don't think that would be a problem as all the recent browsers are supposed to support this, right?

    Anyway, try using a "link rel" tag if the @import doesn't work; either way, report the results back!

    --Vinnie

  5. #5
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh Yeah, I forgot to capitalize the second "s" in styleSheets. Tomorrow when I'm back at work I'll try it and see if it works, and let you know. Thanks!
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    It will also work better if you give your @import an ID, rather than calling it by its index on the page.

    Here's some sample code to start you off. Let's say you want to change all instances of the <h3> tag, and you have a rule saying that all <h3>s should be red in your external sheet, and you want to change that to blue:

    Code:
    <head>
    <style type="text/css" id="myStyles">
      @import url('styles.css');
    </style>
    <script language="javascript" type="text/javascript">
     function changeStyleRules(){
      document.styleSheets['myStyles'].rules['h3'].style.color='#006';
      return true;
     }
    </script>
    </head>

  7. #7
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. Unfortunately, I'm still having a problem with the code. Here is the code that I'm using:

    Code:
    <a href="#" onMouseover="document.styleSheets['myStyles'].rules['detail_display'].style.display = 'none';">Hide</a>
    I changed my <style> tag so that the id equals "myStyles", but I'm still getting this error:

    'document.styleSheets.myStyles.rules.detail_display.style' is null or not an object.
    I'm getting this error in IE 6 on my Win2k machine here at work. Anyone have any ideas as to what I could try to do to get this to work?
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource

  8. #8
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <head>
    <style type="text/css" id="myStyles">
    @import url('styles.css');
    </style>
    <script language="javascript" type="text/javascript">
    function changeStyleRules(){
    document.styleSheets['myStyles'].rules['h3'].style.color='#006';
    return true;
    }
    </script>
    </head>
    the stylesheets name is styles.css but you are trying to call myStyles.css . I think you need to rename your stylesheet or change document.styleSheets['myStyles']... to document.styleSheets['styles']...

    I could be completely wrong but I thought I'lld give it a go at helping you

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try document.getElementById('myStyles').rules['blah'], where 'blah' is the name of your rule.

    Wish I could help more but I'm kinda busy today.

    --Vinnie

  10. #10
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I tried both of your suggestions, but neither of them worked. I'm still getting errors. Anyone have any ideas?
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.styleSheets are stored in a array starting with 0, Zero 0 represents the first styleSheet if its in the page itself, link ref, or import all are the same.


    example:

    <style>
    document.styleSheets[0] the first styleSheet
    </style>


    <style>
    document.styleSheets[1] the 2nd styleSheet
    </style>

    etc....

    ============================================

    rules work similar

    <style>
    .class1 == document.styleSheets[0].rules[0]
    .class2 == document.styleSheets[0].rules[1]
    .class3 == document.styleSheets[0].rules[2]
    </style>



    .class1 = document.styleSheets[0].rules[0]

    so if you - alert(document.styleSheets[0].rules[0].selectorText) - it will return ".class1"

    to change a property within that style - document.styleSheets[0].rules[0].style.color='red'


    This is a powerfull way to do things, and opens allot of possibilities, but its use is limited with browsers other then IE5+. IE4 , and NS6+ has some support for this, but its buggy at best. And note you'll need to write separate codes for NS6, and to this point I havent had any success, but I haven't downloaded a new copy of NS6 for sometime.



    GL..

  12. #12
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I finally got it to work, on IE6 anyways. I took a look at Microsoft's dHTML reference and found some stuff out.

    Instead of using code like this:

    document.styleSheets[0].rules[2].style.letterSpacing

    I have to use code like this when working with imported style sheets:

    document.styleSheets[0].imports[0].rules[2].style.letterSpacing

    I'm not sure how standards compatible this is, so does anyone know if this works in NS6 or IE5?
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    northern Maine
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look at www.w3.org's DOM2 Style and CSS interfaces to see how you would accomplish the same in Moz. IE is surprisingly close to the DOM2 standard for once, but still different enough to require different code for it and standards-compliant browsers.
    Jason - Contact Me
    Supermoderator @ CodingForums


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •