homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

CSS with Javascript
Change CSS based on a link

 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!



 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?


 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.


 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.


 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;


 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