How to add a style tag in a web page from external javascript(js) file

Question

I am developing a web page in which I would like to add style tag dynamically from an external javascript file.

I am using this code that does not work

this.addStyle = function()
    {
        if (! this.inited) {
          alert("not inited");
          return;
         }
        var head = document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        rules = document.createTextNode('.bodys { bgcolor="red"; }');
        style.type = 'text/css';
        if(style.styleSheet)
            style.styleSheet.cssText = rules.nodeValue;
        else style.appendChild(rules);
            head.appendChild(style);
    }

Please use some code formatting for your question.

cederlof
– cederlof

2011-12-01 13:15:30 +00:00
Commented Dec 1, 2011 at 13:15 — cederlof
– cederlof, Commented Dec 1, 2011 at 13:15

César · Accepted Answer · 2011-12-01 15:28:51Z

1

Change .bodys{ bgcolor="red"; } to .bodys{background-color:red}

edited Dec 1, 2011 at 15:28

César

10.1k6 gold badges55 silver badges76 bronze badges

answered Dec 1, 2011 at 13:19

albert

8,1313 gold badges49 silver badges64 bronze badges

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

Comments

Bergi · Accepted Answer · 2011-12-01 15:38:35Z

1

Not all browsers are applicable to generated text nodes. MediaWiki uses

var s = document.createElement( 'style' );
s.type = 'text/css';
s.rel = 'stylesheet';
if ( s.styleSheet ) {
    s.styleSheet.cssText = text; // IE
} else {
    s.appendChild( document.createTextNode( text + '' ) ); // Safari sometimes borks on null
}

Of course also follow alberts answer.

answered Dec 1, 2011 at 15:38

Bergi

670k162 gold badges1k silver badges1.5k bronze badges

1 Comment

Bergi Over a year ago

I'm not sure whether really s.rel = 'stylesheet'; is needed.

Collectives™ on Stack Overflow

How to add a style tag in a web page from external javascript(js) file

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related