hey all,
i got the answer
as

this is html file

<html>
<head>
<link rel="stylesheet" href="1.css" id="stylesheet">
<script type="text/javascript">
function changeStyle(url) {
document.getElementById('stylesheet').href = url;
}

</script>
</head>

<body>
<a href="#" onclick="changeStyle('1.css');return false;" >black</a> <a href="#" onclick="changeStyle('2.css');return false;" >white</a>
</body>
</html>

this is 1.css

body{
background-color:#000000;
}

a{
color:#FFFFFF;
}

and this is 2.css

body{
background-color:#009999;
}
a{
color:#CC0000;
}

if anybody goot better solution please tell me thanx

i thought this is best solution from my side

You may try this instead! Enjoy coding...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Change style</title>
<script type="text/javascript">
<!-- BEGING HIDING
function changeStyle(change)
{ 
if ( change ) 
{
document.body.style.backgroundColor = '#000000'; 
document.body.style.color = '#FFFFFF'; 
}
else 
{ 
document.body.style.backgroundColor = '#C0C0C0'; document.body.style.color = '#000000'; 
  }
}
// DONE HIDING -->
</script>
</head>
<body>

<p align="left">
<b>Choose A Background-Color:</b>
<br />
<a href="javascript:changeStyle(true);">BLACK</a><br />
<a href="javascript:changeStyle();">SILVER</a>

</p>

</body>
</html>

Hi Nikesh,

that's the real answer !!
worked fine for me!!

hey all,
i got the answer
as

this is html file

<html>
<head>
<link rel="stylesheet" href="1.css" id="stylesheet">
<script type="text/javascript">
function changeStyle(url) {
document.getElementById('stylesheet').href = url;
}

</script>
</head>

<body>
<a href="#" onclick="changeStyle('1.css');return false;" >black</a> <a href="#" onclick="changeStyle('2.css');return false;" >white</a>
</body>
</html>

this is 1.css

body{
background-color:#000000;
}

a{
color:#FFFFFF;
}

and this is 2.css

body{
background-color:#009999;
}
a{
color:#CC0000;
}

if anybody goot better solution please tell me thanx

i thought this is best solution from my side

Actually there are alot of ways to do that, and here's 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; } Bringing it up all together...

<html>
<head>
<title><!-- Sample --></title>
<script type="text/javascript">
<!-- 
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>
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.