Jquery dynamically change CSS theme - force updating of class?

Question

I have a web page with a css theme. When I click a button, the theme changes to another file, but as I try to get some of the new theme properties to work on, I see that they are still not updated in the elements.

The css files are pretty simple:

red.css

.square{ background-color:red; }

blue.css

.square{ background-color:blue; }

index.html file:

<link rel="stylesheet" id="theme" href="red.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="mydiv" class="square" style="width:100px; height:100px;"></div>
<button id="mybutton">Change Theme!</button>

<script>
$('#mybutton').on('click', function(){
    console.log($('.square').css("background-color"));
    $('#theme').attr('href', 'blue.css');
    console.log($('.square').css("background-color"));
    alert('When this alert runs, square will still be red, even though the css file has already been switched');
});
</script>

This example is accessible here: http://herofocus.com/temp/

Is there a way to force a refresh on the DOM so that when Alert runs, the theme will alredy have changed?

well when I've clicked the button I see the colour has instantly changed! what do you want it to work like ? — Nishanth Matha, Feb 24 '15 at 23:53
I'm using chrome.. when the alert pops, the color is still red.. I want it to update to blue before the alert pops — sigmaxf, Feb 24 '15 at 23:54

score 1 · Answer 1 · edited May 23 '17 at 12:20

Just put everything after the css change inside a setTimeout() to give the DOM opportunity to update before your code runs.

$('#theme').attr('href', 'blue.css');
setTimeout(function(){
    alert("'When this alert runs, square will be blue!"); 
}, 0);

NOTE: It depends on blue.css being loaded very fast or preloaded. For a more robust (and complex) solution handling the <link> onload event event see @S0lll0s answer.

score 0 · Answer 2 · edited May 23 '17 at 11:43

The problem isn't that the DOM hasn't refreshed yet, it's that when you change the href your browser needs to download the CSS again first (or st least check it against the cache). Therefore it isn't loaded yet at the time you print the CSS (because JS is asynchronous by design).

Instead you might want to load the CSS in a more controlled fashion and have a callback print the new value, see for example https://stackoverflow.com/a/13610128/1598293.

score 0 · Answer 3 · answered Feb 25 '15 at 00:20

Your code is working fine all you have to do is let the browser load completely. try this (untested):

<link rel="stylesheet" id="theme" href="red.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="mydiv" class="square" style="width:100px; height:100px;"></div>
<button id="mybutton">Change Theme!</button>

<script>
$(document).ready(function(){('#mybutton').on('click', function(){
    console.log($('.square').css("background-color"));
    $('#theme').attr('href', 'blue.css');
    console.log($('.square').css("background-color"));
    alert('When this alert runs, square will still be red, even though the css file has already been switched');
});
});

Jquery dynamically change CSS theme - force updating of class?

3 Answers3