there are two style sheete
stylesheet_a.css nad stylesheet_b.css
and the only difference between two is body color (one is red and other is green)
<
html xmlns="http://www.w3.org/1999/xhtml" ><
head id="Head1" runat="server"> <title>Untitled Page</title> <link rel="stylesheet" href="stylesheet_a.css" type="text/css" id="myStylesheet"></link><
script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> var currentStyleSheet = 'stylesheet_a.css';$(document).ready(
function(){$(
"#button1").click(function(){ //$("p").toggleClass("main"); //$("body").toggleClass("main1"); if(currentStyleSheet == 'stylesheet_a.css')currentStyleSheet =
'stylesheet_b.css'; elsecurrentStyleSheet =
'stylesheet_a.css';$(
'#myStylesheet[rel=stylesheet]').attr('href', currentStyleSheet); return false;});
});
$(
"#css_toggle").click(function() { var isOff = $("a").get(0).disabled;$(
"a").get(0).disabled = !isOff;$(
"b").get(0).disabled = isOff;});
</
script><
style type="text/css">.main
{
font-size
:120%;color
:green;}
.main1{
background-color
:Red ;}
</
style></
head><
body> <form id="form1"> <div> <input type="button" ID="button1" value="Button" type="submit"/> <p>This is another paragraph.</p> <input type="button" ID="css_toggle" value="Change css" type="submit"/> </div> </form></
body></
html>