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 — Mike Samuel
– Mike Samuel, Commented Sep 10, 2012 at 18:22

Chris · Accepted Answer · 2012-09-11 13:22:18Z

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, 2012 at 13:22

answered Sep 10, 2012 at 18:24

Chris

27k6 gold badges61 silver badges72 bronze badges

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

2 Comments

Hassen Over a year ago

Thanks a lot Abody97, it works now. Edit: there is no 2 'b' in 'Attribute'.

Chris Over a year ago

@Hassinus Haha, yeah -- very sorry :)

Collectives™ on Stack Overflow

CSS loaded dynamically via javascript but not applied

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related