Question

I’m attempting to append CSS styling to the head of a HTML page like so…

var HEAD = document.getElementsByTagName("head")[0];
s = document.createElement('Style');
s.id = 'cssp';
s.type = 'text/css';
s.innerHTML = ecks.cssp;
HEAD.appendChild(s);

However the CSS located in ecks.cssp never appears in the HTML page. What am I doing wrong?

Just an fyi, I’m using chrome to test.

Answer 1

There are ways to add a style element, but they are browser dependent, unlike adding a link.

The string must be valid css.

function addStyle(str){
    var el= document.createElement('STYLE');
    el.type= 'text/css';
    el.media= 'screen';
    if(el.styleSheet){
        // IE
        el.styleSheet.cssText= str;
    }
    else{
        // Most browsers
        el.appendChild(document.createTextNode(str));
    }
    document.getElementsByTagName('HEAD')[0].appendChild(el);
}