Jump to content

Style sheet switch buttons using javaScript


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...