Stylesheet changer

essential 0 156 Views

A basic example on how to change your stylesheet dynamicaly! I will use a dropDown list to control the environtment!
Assuming that you have 4 different .css ( default, red, blue and green ) on your directory!

From this line you'll have to replace this with your own stylesheets.

default.css body{ background-color: white; color: black; } red.css! body { background-color: red; color: black; } blue.css! body { background-color: blue; color: yellow; } green.css body { background-color: green; color: white; } 

<html>
<head>
<!-- Now the page that will do all the magic.
Code is as follows: -->
<title>Your title goes here!</title>
<script type="text/javascript">
<!-- BEGIN HIDING
function changeStyle()
{ var _head = document.getElementsByTagName('head')[0];
  var _link = document.createElement('link');
_link.type = 'text/css';
_link.href = form1.color.options[form1.color.selectedIndex].value;
_link.rel = 'stylesheet';
_head.appendChild(_link);
}
//-->
</script>
</head>
<body>
<form name="form1" action="#" onsubmit="return false;">
<span id="sample">StyleSheet Changer :</span><br />
<select name="color" onchange="changeStyle();">
<option value="default.css">Default Theme</option>
<option value="red.css">Red Theme</option>
<option value="blue.css">Blue Theme</option>
<option value="green.css">Green Theme</option>
</select>
</form>
<!-- If you're have any problem on this code! Dont hesitate to ask me back! 
Enjoy coding -->
</body>
</html>
Member Avatar for VernonDozier
VernonDozier 2,218 Posting Expert

Very nice!

Member Avatar for hakimkal
hakimkal 0 Newbie Poster

it was fine on IE8 but FF 3.0.6 dint respond but anyways good job

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview