title: Adding a property to a CSS id using JavaScript
body: <p>I got a simple JavaScript that changes the inner HTML of an element when links are clicked, it looks like this:</p>
  
  <pre><code>function changeHeader(Index)
  {
      var headers = new Array("Coffee tables","Side tables","Stand tables","Dinner tables","Stools","Pedestals");
      document.getElementById("header").innerHTML = headers[Index];
  
  }
  </code></pre>
  
  <p>The CSS for <code>header</code> is below:</p>
  
  <pre><code>#header
  {
      cursor: hand; 
      cursor: pointer;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  </code></pre>
  
  <p>And the HTML is basically this:</p>
  
  <pre><code>&lt;p id="header"&gt;Press a link&lt;/p&gt;
  &lt;a href=# onclick="changeHeader(1)"&gt;Coffee tables&lt;/a&gt;
  &lt;a href=# onclick="changeHeader(2)"&gt;Side tables&lt;/a&gt;
  &lt;a href=# onclick="changeHeader(3)"&gt;Stand tables&lt;/a&gt;
  </code></pre>
  
  <p>And so on. My problem is that I'd like to have different background colors on the <code>header</code> element depending on what link is pressed. The first link might get a red background, the second a blue, the third a green and so on.. </p>
  
  <p>How can I use JavaScript to add a property to an already existing CSS id? I don't use jQuery, so only pure JavaScript please :)</p>