title: JQuery Mobile - dynamically changing css with Javascript
body: <p>I am having a problem trying to change the css of a button in JQuery Mobile.  I am not using the default page header ie. within the header I have nested a div with a logo etc. so the header height is about double the default.</p>
  
  <p>The problem is with the back button. It defaults to the top left whereas I would like it to be centered vertically.  To this end, I inserted the script below into the page header just below the script include for JQuery Mobile.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $(".ui-btn").css("margin","20px");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;div data-role="page" id="main" data-theme="b"&gt; 
  &lt;div id="myheader" data-role="header"&gt;&lt;div id="header"&gt;&lt;div id="logo"&gt;&lt;img src="assets/logo.gif" alt="Acme" /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I can't seem to interact with the ui css in any way.  I've also tried:</p>
  
  <pre><code>$("#myheader a.ui-btn").css("margin","20px");
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$(".ui-btn-left").css("margin","20px");
  </code></pre>
  
  <p>And also not nesting it within '$(document).ready(function(){' but nothing seems to be working.</p>
  
  <p>I'd like to change the colours as well, but I'll move on to that once I've worked this out!  Any help or pointers would be hugely appreciated.  </p>
  
  <p>Thanks</p>
  
  <p>Greg</p>