0

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>
3
Contributors
2
Replies
5
Views
8 Years
Discussion Span
Last Post by hakimkal
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.