Jump to content

Javascript Color Changer


Jamesking56

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;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...