title: Jquery dynamically change CSS theme - force updating of class?
body: <p>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.</p>
  
  <p>The css files are pretty simple:</p>
  
  <p>red.css</p>
  
  <pre><code>.square{ background-color:red; }
  </code></pre>
  
  <p>blue.css</p>
  
  <pre><code>.square{ background-color:blue; }
  </code></pre>
  
  <p>index.html file:</p>
  
  <pre><code>&lt;link rel="stylesheet" id="theme" href="red.css" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="mydiv" class="square" style="width:100px; height:100px;"&gt;&lt;/div&gt;
  &lt;button id="mybutton"&gt;Change Theme!&lt;/button&gt;
  
  &lt;script&gt;
  $('#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');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This example is accessible here: <a href="http://herofocus.com/temp/" rel="nofollow">http://herofocus.com/temp/</a></p>
  
  <p>Is there a way to force a refresh on the DOM so that when Alert runs, the theme will alredy have changed?</p>