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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Detecting the Stylesheet in Use

    Each page on this site I'm working on uses Stewart Rosenberger's Dynamic Text Replacement Script to replace the content of h1 and h2 tags with dynamically-generated images (without changing the page structure, for accessibility reasons.)

    Normally, a visitor would follow the link for "Text Only" to turn off the image replacement script, and swap the preferred stylesheet with a text-only stylesheet.

    However, if a visitor switches to the alternate text stylesheet using their client, the image generator script is not disabled.

    What I want to know is, can JavaScript be used to detect the stylesheet that the client is currently using?

    If so I will be able to turn off the DTR script, and I won't need to remove the option of having the alternate style sheet.

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    The following syntax will return false if a particular StyleSheet is applied, true if not, where 'index' is the position of the StyleSheet, you are checking for, in the styleSheets array:

    document.styleSheets[index].disabled;
    Last edited by Puffin the Erb; 01-29-2005 at 09:00 PM.

  • #3
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That looks like just the thing, thanks

    Can I print the stylesheets array to the screen for reference?

  • #4
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, I found this, which looks useful:
    http://www.quirksmode.org/dom/w3c_css.html

  • #5
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    You could list style details thus :

    function displayStyles()
    {
    var cssFiles = "";
    for(i=0;i<document.styleSheets.length;i++)
    {
    // get rid of initial part of URI as it may exceed alert box dimensions
    var nextStyle = document.styleSheets[i].href.split("/") ;

    cssFiles += nextStyle[nextStyle.length-1] + " [ " + document.styleSheets[i].title + " ]" + "\n";
    }
    alert(cssFiles);
    }


  •  

    Posting Permissions

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