Style sheet switch buttons using javaScript

[miles5150]

Hi all, Dont know if you can help?I am trying to offer 2 style sheets for my site. I want to allow the visitor to click a button on my web page which will activate the style change from one sheet to an alternate sheet and back again (I guess this will be an onclick event).Does anyone have or can anyone point me in the direction of some sample code which can do this? It would be nice to have an example to work along with as I am relatively new to javaScript usage and this seems especially tricky. Oh, yes! and I want to make sure my script is external to the page as a .js file probably with an onload event script also used.Any suggestions would be very much appreciated.Best regardsJustin

[AeroCoder]

Hi all, Dont know if you can help?I am trying to offer 2 style sheets for my site. I want to allow the visitor to click a button on my web page which will activate the style change from one sheet to an alternate sheet and back again (I guess this will be an onclick event).Does anyone have or can anyone point me in the direction of some sample code which can do this? It would be nice to have an example to work along with as I am relatively new to javaScript usage and this seems especially tricky. Oh, yes! and I want to make sure my script is external to the page as a .js file probably with an onload event script also used.Any suggestions would be very much appreciated.Best regardsJustin

This tutorial has almost exactly what you're looking for... switching a couple things around could make it work exactly the way you want:http://alistapart.com/stories/alternate/Hope that helps.

[miles5150]

This tutorial has almost exactly what you're looking for... switching a couple things around could make it work exactly the way you want:http://alistapart.com/stories/alternate/Hope that helps.

Many thanks for the above information.I can't believe I couldn't find it before yet tried several search terms and couldn't quite get there.Thanks for giving me the link.Top Geezer:)

[iyeru42]

You also don't need alternates to use different stylesheets. Heck, I used JS a while back.

<script>function changeStyle(file) {     document.getElementByID("stylesheet").href = file; // For HREF     document.getElementByID("stylesheet").src = file; // For SRC     // Use one or the other for above code.}</script>

And then my link tag would be:

<link id="stylesheet" rel="stylesheet" href="blah.css">

And the button would be:

<input type="button" onClick="changeStyle('blah2.css')">

You can also do that for Links rather than buttons.