Menu
I’ve read the article at alistapart.com. Ok, but why is it so complex?
The following works in the browsers I have at hand: IE 6, Firefox 1, Netscape 7.1, Opera 7.5 – all browsers for Windows. I don’t have access to a Mac or other machines. BTW, I got this from the “JavaScript & DHTML Cookbook” by Goodman.
It doesn’t do anything in NS4.8 (the only legacy browser I have) but I don’t care what happens in a non-modern browsers. And since my styles are simple and I’m not using positioning, it really doesn’t break the function of the page.
What am I missing here? Is the ala so complex because of extensive cross-browser compatability?
thx
<html>
<head>
<link id=”styles” rel=”stylesheet” type=”text/css”
href=”style1.css” />
<script type=”text/javascript”>
var style = 1;
function changeStyle() {
if (window.document.getElementById) { //modern browser?
if (style == 1) {
window.document.getElementById(“styles”).href =
“style2.css”;
style = 2;
}
else {
window.document.getElementById(“styles”).href =
“style1.css”;
style = 1;
}
} //end if (window.dcoument.getElementById} check
} //end changeStyle()
</script>
</head>
<body>
<p>this will change</p>
<form>
<input type=”button” value=”Click to change style”
onclick=”changeStyle();”/>
</form>
</body>
</html>