How to load in an external CSS file dynamically?

Question

I\'m trying to create a dynamic page using external .css pages where the page color will get changed. Below is my code. But when I click the href, I am not gett

Answer 1

Try this:

var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = "filename";
document.getElementsByTagName("head")[0].appendChild(fileref)

Answer 2

That code should work, except perhaps you might want to add type="text/javascript" to your script tag.

I tested the code via Firebug and it worked for me.

Maybe the problem is that your original stylesheet is still included in the page and thus overriding the style of your secondary stylesheet?