title: When style changes, change width of div using Javascript
body: <p>I am beginner in JavaScript and it looks like I don't understand quite good if statements. I want to change background-color of div from red to blue when div becomes 500px. Hi will get 500px when I click anywhere on body tag. 
  Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Page Title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body onclick="Go();" &gt;
  &lt;div id="test"&gt;&lt;/div&gt;
  
  &lt;style&gt;
  #test {
  width: 300px;
  height: 250px;
  background-color: red;
  }
  &lt;/style&gt;
  &lt;script&gt;
  function Go() {
  var div_test = document.getElementById('test').style;
  div_test.width="500px";
  }
  
  if (document.getElementById('test').style.width="500px") {document.getElementById('test').style.cssText="background-color:blue";}
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>It looks like that browser instead of understanding part in brackets of if statement as conditional "when that happened", he just create that state/style of div. When page loads div is already blue. </p>