title: Changing CSS Values with Javascript
body: <p>It's easy to set inline CSS values with javascript. If I want to change the width and I have html like this:</p>
  
  <pre><code>&lt;div style="width: 10px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>All I need to do is:</p>
  
  <pre><code>document.getElementById('id').style.width = value;
  </code></pre>
  
  <p>It will change the inline stylesheet values. Normally this isn't a problem, because the inline style overrides the stylesheet. Example:</p>
  
  <pre><code>&lt;style&gt;
     #tId {
        width: 50%;
     }
  &lt;/style&gt;
  
  &lt;div id="tId"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Using this Javascript:</p>
  
  <pre><code>document.getElementById('tId').style.width = "30%";
  </code></pre>
  
  <p>I get the following:</p>
  
  <pre><code>&lt;style&gt;
     #tId {
        width: 50%;
     }
  &lt;/style&gt;
  
  &lt;div id="tId" style="width: 30%";&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is a problem, because not only do I not want to change inline values, If I look for the width before I set it, when I have:</p>
  
  <pre><code>&lt;div id="tId"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The value returned is Null, so if I have Javascript that needs to know the width of something to do some logic (I increase the width by 1%, not to a specific value), getting back Null when I expect the string "50%" doesn't really work.</p>
  
  <p>So my question: I have values in a CSS style that are not located inline, how can I get these values? How can I modify the style instead of the inline values, given an id?</p>