Search code examples
javascriptcssinternet-explorerstylesheetdocument

Internet Explorer (only) Javascript Head createStyleSheet Error

The following JavaScript works fine on Chrome, Firefox & Safari - but will not work on Internet Explorer. I have this JavaScript in my head.

<script type="text/javascript">
    $(document).ready(function(){

    if($(".company-color").size()>0){
            if (document.createStyleSheet){
                document.createStyleSheet('company-color.css');
            }
            else {
                $("head").append($("<link rel='stylesheet' href='/templates/joostrap-rmg/css/company-color.css' type='text/css' media='screen' />"));
            }
        }
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){

    if($(".enterprise-color").size()>0){
            if (document.createStyleSheet){
                document.createStyleSheet('enterprise-color.css');
            }
            else {
                $("head").append($("<link rel='stylesheet' href='/templates/joostrap-rmg/css/enterprise-color.css' type='text/css' media='screen' />"));
            }
        }
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){

    if($(".media-color").size()>0){
            if (document.createStyleSheet){
                document.createStyleSheet('media-color.css');
            }
            else {
                $("head").append($("<link rel='stylesheet' href='/templates/joostrap-rmg/css/media-color.css' type='text/css' media='screen' />"));
            }
        }
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){

    if($(".contact-color").size()>0){
            if (document.createStyleSheet){
                document.createStyleSheet('contact-color.css');
            }
            else {
                $("head").append($("<link rel='stylesheet' href='/templates/joostrap-rmg/css/contact-color.css' type='text/css' media='screen' />"));
            }
        }
    });
</script>

The JavaScript looks in the body of the page for a particular div class and and then uses a particular css file depending on what is found, as below:

<div class="company-color">&nbsp;</div>

The above pull's in the following style sheet:

/templates/joostrap-rmg/css/company-color.css

Any idea's what the Internet Explorer issue is? Ideally needs to work in IE9+

Solution

  • As stated in MSDN, document.createStyleSheet is not supported since IE11: http://msdn.microsoft.com/en-us/library/ie/ms531194 Which IE do you use?

    Because you already use jQuery I propose to create stylesheet jQuery way: 

    $('<link />').attr('rel', 'stylesheet').attr('href', 'url...');

    Simpler, just always fall back to else section which appends <link> tag to <head>:

    <script type="text/javascript">
    $(document).ready(function () {
        if ($(".company-color").size() > 0) {
            $("head").append($("<link rel='stylesheet' href='/templates/joostrap-rmg/css/company-color.css' type='text/css' media='screen' />"));
        }
        if ($(".enterprise-color").size() > 0) {
            $("head").append($("<link rel='stylesheet' href='/templates/joostrap-rmg/css/enterprise-color.css' type='text/css' media='screen' />"));
        }
        if ($(".media-color").size() > 0) {
            $("head").append($("<link rel='stylesheet' href='/templates/joostrap-rmg/css/media-color.css' type='text/css' media='screen' />"));
        }
        if ($(".contact-color").size() > 0) {
            $("head").append($("<link rel='stylesheet' href='/templates/joostrap-rmg/css/contact-color.css' type='text/css' media='screen' />"));
        }
    });
</script>

    For brevity, I've combined multiple <script> tags and $(document).ready() handlers.