loading CSS with jQuery not applying styles to page

Question

I'm loading a CSS file dynamically after the document.ready function fired. This is what I have:

$.get(TheCSSTag.href, function () {

    alert('loaded');
    DoSomething();

}, "text/css");

The problem is that the alert triggers fine (which I assume means the CSS loaded) but the styles aren't applied to the HTML elements.

Note: other solutions that involve creating a CSS tag and appending to the DOM like this document.getElementsByTagName('head')[0].appendChild(TheCSSTag); don't work for me because I need a callback function to execute when the CSS file loaded.

There's nothing in your code that shows the CSS is being added to the document, or does $.get() do that if you add "text/css" there? — Popnoodles
– Popnoodles, Commented Jun 19, 2014 at 18:30
Loading CSS file dynamically is usually a bad idea. What are you trying to achieve? — Anthony Garcia-Labiad
– Anthony Garcia-Labiad, Commented Jun 19, 2014 at 18:34
@AnthonyGarcia: the css is loaded from the client based on the screen resolution. — frenchie
– frenchie, Commented Jun 19, 2014 at 19:04
@AnthonyGarcia: no, the name of the CSS is determined at runtime. Media queries won't work for that. — frenchie
– frenchie, Commented Jun 19, 2014 at 19:12

Aeveus · Accepted Answer · 2014-06-19 18:38:47Z

1

The thing is... You're not actually telling the browser to use the CSS. You're just asking jQuery to get it for you. Inside the callback of $.get, you need to actually inject it into your page.

Here's an example using jQuery where you read the entire thing and put it into a style tag inside head:

$.when($.get('your_css_file.css')).done(function (response) {
    $('<style />').text(response).appendTo($('head'))
})

Another way would be to simply add the URL to the head:

$('<link /')
    .attr('type', 'text/css')
    .attr('rel', 'stylesheet')
    .attr('href', 'your_css_file.css')
    .appendTo($('head'))

edited Jun 19, 2014 at 18:38

answered Jun 19, 2014 at 18:30

Aeveus

5,4323 gold badges32 silver badges42 bronze badges

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

Comments

Popnoodles · Accepted Answer · 2014-06-19 18:32:28Z

1

You need to add the CSS file to the page. $.get() won't do that for you.

$.get(TheCSSTag.href, function(){

     $('<link>', {rel:'stylesheet', type:'text/css', 'href':TheCSSTag.href}).appendTo('head');
     alert('loaded');
     DoSomething();

}, "text/css");

Please note: without xdomain permissions $.get will only load local files though you can just add them to head without using $.get first.

answered Jun 19, 2014 at 18:32

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

Collectives™ on Stack Overflow

loading CSS with jQuery not applying styles to page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related