Add Multiple Styles with JavaScript
<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>