HTML and CSS Reference
In-Depth Information
EXAMPLE
14.27 (
CONTINUED
)
<script type="text/javascript">
2
function changeStyle(){
// alert(document.styleSheets.length);
3
document.styleSheets[0].disabled=false;
//
now visible
4
document.styleSheets[1].disabled=true;
}
5
function enableOldStyle(){
document.styleSheets[0].disabled=true;
6
if(document.styleSheets[1].cssRules){ //
W3C
document.styleSheets[1].cssRules[1].style.color="purple";
}
else{ //
Microsoft Internet Explorer
7
document.styleSheets[1].rules[1].style.color="purple";
document.styleSheets[1].disabled=false;
}
document.styleSheets[1].disabled=false;
//
now visible
}
</script>
8
<style type="text/css">
p { background-color:darkblue;
font-weight:bold ;
font-size: 12pt;
font-family:arial;
color:yellow; }
h1{color:red;}
</style>
</head>
<body>
<h1>Hello</h1>
9
<form>
<input type="radio"
onclick="JavaScript:changeStyle()">new style<br />
<input type="radio"
onclick="JavaScript:enableOldStyle()">old style<br />
</form>
<p>
10 This is the changing style sheet. Notice when we click on
the radio button,how the style for the whole page changes.
That's because we disabled one stylesheet and replaced it
with another.
</p>
<h1>Goodbye</h1>
</body>
</html>
