Adding a style tag to a page

Question

I'm trying to add some styles into a page using javascript

var style = document.createElement("style"),
style.innerHTML = ".firstChildTest div:first-child {width: 2px;}";

But ie6-8 are throwing an error when trying to use innerHTML on a style element. I also get the same error using

 style.append(document.createTextNode(".firstChildTest div:first-child {width: 2px;}"));

How do I inject styles into a style element in ie?

score 0 · Accepted Answer · edited May 23 '17 at 09:58

0

See the answer here: How do you copy an inline style element in IE?

function copy_style(style_text) {    
    var tmp_div = document.createElement('div');
    tmp_div.innerHTML = '<p>x</p><style type="text/css">' + style_text + '</style>';

    return tmp_div.getElementsByTagName('style')[0];
}

Note that you need the <p> tag in the innerHTML of the tmp_div. Without it, IE does not accept the style element.

edited May 23 '17 at 09:58

Community

1
1

answered Apr 15 '11 at 13:22

lambacck

9,768
3
34
46

Very odd quirk to be able to create a new style element you can't then do anything with. Cheers for the answer – wheresrhys Apr 15 '11 at 14:53
@wheresrhys You can insert the style DOM element this produces into the document tree. – lambacck Apr 15 '11 at 15:39
What I meant is that document.createElement("style") is an odd quirk - your function works great. cheers – wheresrhys Apr 16 '11 at 16:05

score 0 · Answer 2 · answered Apr 15 '11 at 14:11

IE before #9 cannot use childNodes to add text to a style (or script or option) element, And styles are supposed to be in the head of an html document.

function addStyle(str){
    var el= document.createElement('style');
    if(el.styleSheet) el.styleSheet.cssText= str;
    else{
        el.appendChild(document.createTextNode(str));
    }
    return document.getElementsByTagName('head')[0].appendChild(el);
}

Adding a style tag to a page

2 Answers2