Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS with Javascript

Change CSS based on a link



2:36 pm on Jun 30, 2004 (gmt 0)

10+ Year Member

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!


3:34 pm on Jun 30, 2004 (gmt 0)

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

Welcome to WebmasterWorld

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


6:59 pm on Jun 30, 2004 (gmt 0)

10+ Year Member

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

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


12:49 am on Jul 1, 2004 (gmt 0)

10+ Year Member

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.


1:02 am on Jul 1, 2004 (gmt 0)

10+ Year Member

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;


4:41 pm on Jul 4, 2004 (gmt 0)

10+ Year Member

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

Featured Threads

Hot Threads This Week

Hot Threads This Month