switching style sheets

liunx

Guest
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=http://www.webdeveloper.com/forum/archive/index.php/"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 = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->
"style2.css";
style = 2;
}
else {
window.document.getElementById("styles").href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->
"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>It's complex because what if users have disabled Javascript? Believe it or not, users find many of Javascripts affects annoying. Thus, they disable it. Using a server side language is much more reliable.Now I know.

Thank you
 
Back
Top