#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    30
    Rep Power
    12

    how to do css style changes?


    Hi,
    I would like to give visitors to my page the option of choosing from a number of different stylesheets. I remember seeing a javascript to do this ages ago, but can't find it now. Please can anyone tell me how to do this, or send me a link for a suitable code snippet?
    Thanks,
    Munna
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    you could write a function to modify this DOM property:
    Code:
    document.styleSheets[0].href
    Just set it to the filenames of your other style sheets.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    30
    Rep Power
    12
    ctstone,
    I'm a newbie to javascript -- please can you explain a bit more in detail?
    munna
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    Sure, I'll assume you have a drop down menu with the id my_css which looks something like this:
    Code:
    <select id="my_css" onchange="set_css(this)">
    <option value="style1.css">style 1</option>
    <option value="style2.css">style 2</option>
    </select>
    Then you want a function called set_css that looks like this:
    Code:
    function set_css(the_select) {
    	var the_css = the_select.options[the_select.selectedIndex].value;
    	document.styleSheets[0].href = the_css;
    }
    Hope that works for you.

IMN logo majestic logo threadwatch logo seochat tools logo