Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts

    Accessing the styleSheets object via ID attribute?

    Hi:
    Is there a way to access a particular style sheet on the page using something other than its index number, such as the ID attribute? Lets say I have a stylesheet as follows:

    <style type="text/css" id="mysheet">
    body{
    color:blue;
    }
    </style>

    To access the above stylesheet, I figured I could use:

    document.styleSheets["mysheet"]

    though this technique seems to only work in IE and not NS6+. I wish to access it by ID since using its index number is not always reliable.

    Thanks.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Why don't you simply use document.getElementById, then?

    The styleSheets collection uses W3C DOM2 CSS in moz and saf/konq, in between on iem, and ie proprietary in iew, which means there's no de facto standard way of handling it. Not to speak of, op7 and iCab supports getElementsById but not styleSheets.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Hi liorean:
    Thanks. I've tried using document.getElementById() instead, though that didn't quite work in accessing the individual rules of the stylesheet. If I recall correctly while reading a book, using document.getElementById on a stylesheet object limits greatly what can in turn be accessed.

    For example:

    //this works (contains blue)
    var test=document.styleSheets[0].cssRules[0].style.color

    //this DOESNT:
    var test=document.getElementById("mysheet").cssRules[0].style.color

    It has to do with accessing the actual style sheet's object and not, respectively, I think.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know if you care about this - but if you give a stylesheet <link> an ID then netscape 4 won't apply any of its rules, as if it weren't there at all.

    I've found a good way to identify stylesheets is to give them a "title" attribute, and then iterate through getElementsByTagName("link") to find it.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Thanks Cake. The title attribute was useful, since apparently looking up "id" instead doesn't work.

    I might just use the ancient document.write() and conditionally write out what I need, since between all the browser inconsistencies and incompatibility, it's becoming too much lol.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    var stylesheet=elm.sheet||elm.styleSheet||null;

    W3C LinkStyle interface
    In ie, you have to use the styleSheet object instead.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BTW - I once wanted to change the styles of all instances of an element, and jkd pointed me towards DOM 2 CSS to acheive this (http://codingforums.com/showthread.p...threadid=14259)

    Very cool .. but you know what ... it turned out to be slower than a getElementsByTagName iterator ...
    Last edited by brothercake; 04-02-2003 at 07:25 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

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