Trying to append CSS to the head of a HTML page using javascript

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.

ecks is a HTMLStyleElement, ecks.cssp is the CSS itself. — Skizit
– Skizit, Commented Jan 21, 2011 at 12:11
OK... naveen is right... what is ecks? And what does it contain? However you can insert a src="file.css" in the tag so that you'll create a stylesheet linked to an external file. — Andry
– Andry, Commented Jan 21, 2011 at 12:13
You have tried to print ecks.cssp? Does javascript have access to the content? for examples just trying to do alert(ecks.cssp) — Andry
– Andry, Commented Jan 21, 2011 at 12:14

kennebec · Accepted Answer · 2011-01-21 12:17:52Z

3

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);
}

answered Jan 21, 2011 at 12:17

kennebec

105k32 gold badges109 silver badges127 bronze badges

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

Comments

Fran Verona · Accepted Answer · 2011-01-21 12:13:13Z

0

Just a tip founded on Google and adapted to you:

function loadcss(filename){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadcss("mystyle.css", "css") //dynamically load and add this .css file

The link also contains the source to load JS.

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

answered Jan 21, 2011 at 12:13

Fran Verona

5,4866 gold badges49 silver badges87 bronze badges

2 Comments

Marcel Korpel Over a year ago

Don't use setAttribute to set those properties, just use DOM element's properties directly, or in some cases you'll make IE cry.

Fran Verona Over a year ago

I wasn't checking navigator compatibility, but thanks for the tip! :)

Collectives™ on Stack Overflow

Trying to append CSS to the head of a HTML page using javascript

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related