title: Add Multiple Styles with JavaScript
body: <p>I want to add multiple lines of CSS with JavaScript. I know I can do this:</p>
  
  <pre><code>document.getElementById(id).style.property=new style
  </code></pre>
  
  <p>as in:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;h1 id="id1"&gt;My Heading 1&lt;/h1&gt;
  
  &lt;button type="button" 
  onclick="document.getElementById('id1').style.color = 'red'"&gt;
  Click Me!&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But, the above code allows me add just a single CSS Property. If a want to add more than one property, like this:</p>
  
  <pre><code>#id1 {
      color: red;
      background-color: beige;
      padding-bottom: 2px;
      margin: 3px;
  }
  </code></pre>
  
  <p>How do I add all of this by not repeating:</p>
  
  <pre><code>document.getElementById(id).style.property=new style
  </code></pre>
  
  <p>....again and again. Thanks in advance !</p>