homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS with Javascript
Change CSS based on a link

10+ Year Member

Msg#: 4003 posted 2:36 pm on Jun 30, 2004 (gmt 0)

I want to change change the style sheet for each page based on a selection by a user. The problem is that I need to change the whole style sheet for the page not just certain elements on the page. I tried to use this code but it doesn't like the eval() function. Please help if you can:
<script type="text/javascript">
function switchstyles(style)
//<link rel="STYLESHEET" id="default" type="text/css" href="http://www.test.com/includes/style.css">
if (style == 'HC')
if (style == 'Default')
alert('Call Function');
eval("\<link rel='STYLESHEET' type='text\/css' href='http:\/\/www.test.com\/health\/includes\/style_hc.css'\>");
//<link rel="STYLESHEET" type="text/css" href="http://www.test.com/includes/style.css">
The reason for this is everytime a link is clicked I want to pass the value of the link to the switchsytles() and have it load that stylesheet instead of the default one. Thanks for all the help in advance!



WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4003 posted 3:34 pm on Jun 30, 2004 (gmt 0)

Welcome to WebmasterWorld

Have you looked into session management at all? Are you using Perl/PHP/ASP?


10+ Year Member

Msg#: 4003 posted 6:59 pm on Jun 30, 2004 (gmt 0)

Yes, my template switcher that does this uses PHP sessions.

:/ I think it's the only easy way to do it.


10+ Year Member

Msg#: 4003 posted 12:49 am on Jul 1, 2004 (gmt 0)

if you aren't worried about permenance (like a session), then you should be able to just do this:

function something(){

document.styleSheets[0].href = "style2.css";


hum... this isn't working in mozilla. It complains that href is not changable.


10+ Year Member

Msg#: 4003 posted 1:02 am on Jul 1, 2004 (gmt 0)

href is *supposed* to be readonly.

So, I would suggest adding as many style sheets as you want as the page loads with <link> 's, and then disabling all but one, and enabling different ones when the user selects a new style.

*Not tested*

For instance...

function Load()
// disables 2nd stylesheet
document.styleSheets[1].disabled = true;

function Switch()
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;


10+ Year Member

Msg#: 4003 posted 4:41 pm on Jul 4, 2004 (gmt 0)

I'm very interested in this. Would it be possible if someone provide a good tutorial link using php? Thanks. :D

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved