Inspired by the style switcher method reported by Rober Jan Verkade, the creator of naar voren, I made one that works within an XML environment, like this website and some others. I'm not saying I'm going to use it, but I wanted to make one.
Example page: style switcher test. The example page uses inline javascript and CSS, this made it easier to develop the example. In a 'real site' this should be placed external of course. I also didn't use different style sheets. I only made a little function to change the background color:
function bg(color){
document.getElementsByTagName("html")[0].style.backgroundColor = color;
}
This is of course not completely backwards compatible and I would be better of styling the body element, but I made it for real XML use. If you really like the backwards compatibility you could just add the same rule and replace 'html' by 'body' in that function. Quite easy. It should be noted that IE6 supports the rule above, but it doesn't support background images applied to the html element. I should make a test case for that one time, so people can reveal in what browsers it will actually work :).
Back to the example; if your browser supports javascript correctly you will see the two buttons twice. The difference is that the second pair is generated with JavaScript, I didn't use a single byte of HTML. That why I dropped the a elements and applied the onclick event directly to the image. If you don't use images you could drop the href attribute, since that is nog longer useful as you generate everything with javascript.
Some other attributes could have been dropped as well. The height and weight attributes for example. The alt attribute should not be removed, since images could be switched of by a user. If I remove the images (or disable them) everything works fine in Mozilla. Internet Explorer isn't really nice in showing the alternatives; it only shows you two white boxes.
Only one problem arises. You may have noticed I removed the onkeypress event, I did this because it doesn't work any more when it is applied to the img element. I have the same problem with my navigation bar on the right. There should be a method to make them part of the nav/tab order so they can be reached by 'tabbing' or an alternate method.