Jump to content

Style sheet switch buttons using javaScript


miles5150
 Share

Recommended Posts

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

Link to comment
Share on other sites

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. :)
Link to comment
Share on other sites

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:)
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...