Jump to content

Javascript Color Changer


Jamesking56
 Share

Recommended Posts

Hi,I have css files that are the same EXCEPT for colour differences. I want to make an AJAX/Javascript color changer on my site.So, How can I make AJAX/Javascript change the <link rel=""> so it changes the page's Color?

Link to comment
Share on other sites

Play around with this. Works in FF, SF, and OP. I haven't tried it in IE, where you might need to change the way you get a reference to the link element -- by using document.getElementsByTagName('link')[1], for instance.The reason for explicitly linking to both stylesheets at page-load is to force "test2.css" into the browser's cache. That should make the changeme function work immediately instead of waiting for "test2.css" to download. (I think so, anyway. I haven't done this for a while, and I'm reinventing it on my desktop.)changeme.html (snippets)

<link href="test2.css" type="text/css" rel="stylesheet"><link href="test1.css" type="text/css" rel="stylesheet" id="link1"><script type="text/javascript">	function changeme() {		document.getElementById("link1").href="test2.css";	}</script><!-- snip --><div>	HELLO!</div><button type="button" onclick="changeme()">Change!</button>

test1.css

div {	background-color: #000;	color: #00f;}

test2.css

div {	background-color: #ffa;	color: #fff;}

Edited by Deirdre's Dad
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...