Working with the DOM.
After working with the DOM trying to get my new theme switcher to work, I find that M$ has done a nice job of making it easier for me. IE on both Windows and Mac support document.styleSheets[0].imports and document.styleSheets[0].addImport(url). These have made it very easy for me to replace the @import statement in a <style> declaration. However, Mozilla is a different story. I have created a new switchTheme method that is as follows:
<script type="text/javascript">
<!--
function switchTheme(themeName) {
var docSheet = document.styleSheets[0];
var nextTheme = "/skins/" + themeName + "/styles/colors-n-fonts.css";
if (document.all) {
docSheet.removeRule[0];
docSheet.addImport(nextTheme);
} else {
docSheet.deleteRule(0);
docSheet.insertRule('@import url(' + nextTheme + ');',0);
}
var nextTitle = "/skins/" + themeName + "/images/title-rd.gif";
document.getElementById("title").src = nextTitle;
}
// -->
</script>
In Mozilla, this appears to work - as the mouseover colors on my links do change to use the 'sunset' theme. Unfortunately, that's all that changes. As usual, any suggestions are appreciated. Also, did you know IE/Mac supports document.all? I didn't think it did... until today!
Try this code in your browser by clicking here.
While developing this script, I received many tips and hints from this site.