title: Setting styles through setAttribute function of an element
body: <p>Am I using setAttribute correctly? When I click reset after say clicking "blue" button, box has no color but it seems like it is still setting the height to 150px. What am i doing wrong here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("button1").addEventListener("click", function() {
    document.getElementById("box").style.height = "250px";
  });
  
  
  
  document.getElementById("button2").addEventListener("click", function() {
    document.getElementById("box").style.backgroundColor = "blue";
  });
  
  
  document.getElementById("button4").addEventListener("click", function() {
    document.getElementById("box").setAttribute("style", "backgroundColor: orange; height:150px");
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"&gt;&lt;/div&gt;
  
  &lt;button id="button1"&gt;Grow&lt;/button&gt;
  &lt;button id="button2"&gt;Blue&lt;/button&gt;
  &lt;button id="button3"&gt;Fade&lt;/button&gt;
  &lt;button id="button4"&gt;Reset&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>