Trying to add style tag using javascript (innerHTML in IE8)

Question

This doesn't work in IE8. I think it's the innerHTML that causes the problem. How to solve?

// jQuery plugin
(function( $ ){

    $.fn.someThing = function( options ) {  

        var d = document,
            someThingStyles = d.createElement('style');

        someThingStyles.setAttribute('type', 'text/css');
        someThingStyles.innerHTML = " \
        .some_class {overflow:hidden} \
        .some_class > div {width:100%;height:100%;} \
        ";
        d.getElementsByTagName('head')[0].appendChild(someThingStyles);

        });

    };

})( jQuery );

Who uses style and jquery that way? use classes and\or .css — gdoron
– gdoron, Commented Feb 12, 2012 at 16:24
Why do you use pure JS with jQuery? jQuery was made to get around cross-browser issues like this. — JJJ
– JJJ, Commented Feb 12, 2012 at 16:25
you are missing var and ; var d = document; var someThingStyles = d.createElement('style'); — gdoron
– gdoron, Commented Feb 12, 2012 at 16:25
@gdoron: It can be very useful to dynamically generate style rules. Also, you can define multiple variable with one var statement, which the OP is already doing. — Tim Down
– Tim Down, Commented Feb 12, 2012 at 16:26
@gdoron - What? Javascript lets you assign a list of vars via var and , so var x = 1, y = 2, z = 3; is a totally valid declaration. — zellio
– zellio, Commented Feb 12, 2012 at 16:33

Rob W · Accepted Answer · 2012-02-12 16:31:18Z

14

jQuery

Since you're already using jQuery, use:

 $('<style type="text/css">' + 
   '.some_class {overflow:hidden}' +
    '.some_class > div {width:100%;height:100%;}' +
    '</style>').appendTo('head');

Pure JavaScript

If you don't want to use jQuery, you have to first append the <style> element, then use the style.styleSheet.cssText property (IE-only!!).

var d = document,
    someThingStyles = d.createElement('style');
d.getElementsByTagName('head')[0].appendChild(someThingStyles);
someThingStyles.setAttribute('type', 'text/css');

someThingStyles.styleSheet.cssText = " \
.some_class {overflow:hidden} \
.some_class > div {width:100%;height:100%;} \
";

answered Feb 12, 2012 at 16:31

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vsync Over a year ago

You could use document.head.appendChild and style.type = ... instead of this long code

Rob W Over a year ago

@vsync document.head is only supported since IE9 (and Firefox 4; back then when the answer was written, there were still lots of FF 3.6 users). Setting the type is optional (in HTML5, it defaults to text/css). If you don't need to worry about compatibility with old IE, then you can just use

var style = document.createElement('style');style.textContent = '... style sheet here ...';document.head.appendChild(style);

Diniden Over a year ago

Just for anyone paying attention: appending first before setting cssText DOES matter! Odd ball cases that it is needed, but it is important.

kennebec · Accepted Answer · 2013-06-07 18:12:45Z

9

If you weren't using jquery, IE before version 9 writes to a style element by assigning a css string to the styleelement.styleSheet.cssText.

Other browsers (including IE9+) let you append text nodes to the element directly.

function addStyleElement(css){
  var elem=document.createElement('style');
  if(elem.styleSheet && !elem.sheet)elem.styleSheet.cssText=css;
  else elem.appendChild(document.createTextNode(css));
  document.getElementsByTagName('head')[0].appendChild(elem); 
}

edited Jun 7, 2013 at 18:12

answered Feb 12, 2012 at 16:33

kennebec

105k32 gold badges109 silver badges127 bronze badges

2 Comments

Herms Over a year ago

One caveat I ran into: elem.styleSheet is null for me in IE8 until I add the element to the DOM, so I had to move setting the contents of the <style> tag to the end of the code, after document...appendChild.

ValeriiVasin Over a year ago

This works only if you explicitly add .setAttribute('type', 'text/css')' before check for elem.styleSheet.

J. K. · Accepted Answer · 2012-02-12 16:32:04Z

1

You should check out the CSSOM (CSS Object Model) spec - http://dev.w3.org/csswg/cssom/

You will probably be interested in the cssText property of CSSRule objects - http://dev.w3.org/csswg/cssom/#dom-cssrule-csstext

answered Feb 12, 2012 at 16:32

J. K.

8,3781 gold badge38 silver badges36 bronze badges

Collectives™ on Stack Overflow

Trying to add style tag using javascript (innerHTML in IE8)

3 Answers 3

jQuery

Pure JavaScript

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

jQuery

Pure JavaScript

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related