title: How to replace style with javascript that has already been set?
body: <p>I'm implementing menu that is selected by the help of javascript. In <a href="http://jsfiddle.net/vusan/u66PY/1/" rel="nofollow">jsfiddle</a>.
  Blocks are selected by the help of changing the style in innerHTML of div here.</p>
  
  <p><strong>But how to replace the style that has already been set?</strong> </p>
  
  <p>Here my problem is I cannot select <strong>block 1</strong>. </p>
  
  <p>full html code:</p>
  
  <pre><code>&lt;style&gt;
  div {width:10px;height:10px;margin:10px;
      background:#ccc;cursor:pointer;padding:10px;
  }
  &lt;/style&gt;
  &lt;div id="makeThatEnable" style="display:none"&gt;&lt;/div&gt;
  
  &lt;div id="one" onclick="makeThisEnable(this.id)" style="border:1px solid #00f"&gt;1&lt;/div&gt;
  &lt;div id="two" onclick="makeThisEnable(this.id)"&gt;2&lt;/div&gt;
  &lt;div id="three" onclick="makeThisEnable(this.id)"&gt;3&lt;/div&gt;
  &lt;div id="four" onclick="makeThisEnable(this.id)"&gt;4&lt;/div&gt;
  &lt;div id="five" onclick="makeThisEnable(this.id)"&gt;5&lt;/div&gt;
  &lt;br&gt;
  Click on box to select it.
  
  &lt;script&gt;
  function makeThisEnable(id) {
      document.getElementById('makeThatEnable').innerHTML="&lt;style&gt; #"+id+" {border:1px solid #f00}&lt;/style&gt;";   
  }
  &lt;/script&gt;
  </code></pre>