title: Possible bug when changing element class name with javascript in IE8, IE9 and IE10
body: <p><strong>Note:</strong> I had a previous similar question which I've now attempted to delete. I thought the problem was to do with the .NET webbrowser control but it's to do with IE.</p>
  
  <p>The following code is the contents of an .htm file that simply displays 3 items that can be clicked. As each item is clicked a javascript method changes its background to blue and changes the previously selected item background back to white.  </p>
  
  <p>Here's the problem, which only occurs IE8, 9 and 10. It works in FF, chrome and I managed to demonstrate it works in IE5 and IE7 using IE10 developer preview.</p>
  
  <p>Click on ITEM 1, then click on ITEM 1.1 - ITEM 1.1 is highlighted but ITEM 1 is not de-highlighted.</p>
  
  <p>However (moving up the document tree):<br>
  Click on ITEM 1, then ROOT - No problem<br>
  Click on ITEM 1,1 then ITEM 1 - No problem.</p>
  
  <p>Now, if I switch the javascript selectElement(e) method to first deselect then select, the problem becomes:  </p>
  
  <p>Click on ITEM 1.1 then click on ITEM 1 - There is a noticeable delay between ITEM 1 being clicked and the blue background being displayed.</p>
  
  <p><strong>If the image tags are removed, the problem goes away.</strong>  </p>
  
  <p><strong>Scrolling the item out of view and then back in again fixes the rendering. Unfortunately, calling Invalidate or Update does not fix the problem.</strong></p>
  
  <p><strong>Switching the display style of the previously selected element to none and then back again fixes the problem - unless the user selects the node text by mistake (eg double-click)</strong></p>
  
  <p>Some things I've tried:</p>
  
  <ol>
  <li>Instead of just changing the class, I've tried replacing the outerhtml completely but this makes no difference.  </li>
  <li>Removing the image tag and including a background image makes no difference.</li>
  </ol>
  
  <p><strong>Code</strong></p>
  
  <p>*When testing this on your own machine, the web page will not be able to find the 'expand_tree_20x8.png' file; this doesn't matter as the behaviour is exhibited whether the images can be found or not. The important thing is that the image tags must be in the file.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB"&gt;
  
      &lt;head&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
          &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt;
  
          &lt;style type="text/css"&gt;
              span, img {margin:0;padding:0}
              .child {margin-left: 10px;}
              .normal {background-color: White;}
              .selected {background-color: blue; color: white;}
          &lt;/style&gt;
  
          &lt;script type="text/javascript"&gt;
  
              var selectedElement;
  
              function selectElement(e) {
  
                  /* Select new element */
                  e.attributes["class"].value = "selected";
  
                  /* Unselect currently selected */
                  if (selectedElement) {
                      selectedElement.attributes["class"].value = "normal";
                  }
  
                  selectedElement = e;
              }
  
  
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div&gt;
  
              &lt;div class="child"&gt;&lt;label id="root_id" class="normal" onclick="selectElement(this)"&gt;ROOT&lt;/label&gt;&lt;/div&gt;
  
              &lt;div class="child"&gt;&lt;img alt="img" src="temp/expand_tree_20x8.png" /&gt;
  
                  &lt;label id="item1_id" class="normal" onclick="selectElement(this)"&gt;ITEM 1&lt;/label&gt;
  
                  &lt;div class="child"&gt;&lt;img alt="img" src="temp/expand_tree_20x8.png" /&gt;
                      &lt;label id="item1_1_id" class="normal" onclick="selectElement(this)"&gt;ITEM 1.1&lt;/label&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>