CSS loaded dynamically via javascript but not applied

Question

I have a javascript file that load a content via AJAX and apply the appropriate style by loading the corresponding CSS file:

var ssioCss = document.createElement("link");
ssioCss.setAttribute("href", baseURL + "ssio-plugin.css");
ssioCss.setAttribute("type", "text/css");
document.head.appendChild(ssioCss);

But unfortunately, the style is not applied, event the file was correctly loaded (checked via chrome inspector).

Did I missed something? Any idea how to fix that?

Thanks in advance.

possible duplicate of [Dynamically loading css stylesheet doesn't work on IE](http://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie) — Mike Samuel, Sep 10 '12 at 18:22

Chris · Accepted Answer · 2012-09-11T13:22:18.903

6

You're missing something:

ssioCss.setAttribute("rel", "stylesheet");

Otherwise there's nothing to tell the browser what to do the with the downloaded file. Just in case you're wondering, type = "text/css" only restricts the MIME Type.

edited Sep 11 '12 at 13:22

answered Sep 10 '12 at 18:24

Chris

26,544
5
58
71

Thanks a lot Abody97, it works now. Edit: there is no 2 'b' in 'Attribute'. – Hassen Sep 11 '12 at 13:20
@Hassinus Haha, yeah -- very sorry :) – Chris Sep 11 '12 at 13:22

CSS loaded dynamically via javascript but not applied

1 Answers1