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.

<script language="javascript">

// 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 += "<link rel=\"stylesheet\" href=\"" + this.otherScreen + "\">";

    if (this.otherPrint != "")
            head.innerHTML += "<link rel=\"stylesheet\" media=\"print\" href=\"" + this.otherPrint + "\">";

   }
}
// 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();

</script>