Dynamically switching stylesheets using client-side code
Sometimes, it is necessary to override stylesheets defined on a page or to add additional stylesheets, perhaps for different media. The script below defines a JS object that allows you to define stylesheets for screen/print for IE/Other browsers. It then adds them to the page dynamically.
In the code below, you can ignore the portion from //BEGIN to //END. The snippet at the end is all that needs to be changed. Se the desired values for “picker.ieScreen,” “picker.iePrint,” “picker.otherScreen,” and “picker.otherPrint” and the code will take care of the rest.
// BEGIN: styleSheetPicker object definition
function styleSheetPicker()
{
this.ieScreen = this.iePrint = this.otherScreen = this.otherPrint = "";
}
styleSheetPicker.prototype.render = function()
{
if (document.createStyleSheet)
{
if (this.ieScreen)
document.createStyleSheet(this.ieScreen);
if (this.iePrint)
{
var ieP = document.createStyleSheet(this.iePrint);
ieP.media = "print";
}
}
else
{
var head = document.getElementsByTagName("head")[0];
if (this.otherScreen != "")
head.innerHTML += "";
if (this.otherPrint != "")
head.innerHTML += "";
}
}
// END: styleSheetPicker object definition
var picker = new styleSheetPicker();
// IE stylesheets
picker.ieScreen = "ie.css";
picker.iePrint = "other.css";
// Other browser stylesheets
picker.otherScreen = "default.css";
picker.otherPrint = "other.css";
picker.render();