hey all,
will anybody give me the code for this
thankx in advance
:)
nikesh.yadav 4 Posting Whiz in Training
nikesh.yadav 4 Posting Whiz in Training
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
essential 84 Posting Shark Featured Poster
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> anoop_gkris 0 Newbie Poster
Hi Nikesh,
that's the real answer !!
worked fine for me!!
hey all,
i got the answer
asthis 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
essential 84 Posting Shark Featured Poster
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> 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.