<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DHTML: Changing Presentational Attributes</title>
  <style type="text/css">
  <![CDATA[
    /* provide some supporting style information */
    #test[bgcolor="red"] > tr > td { color: yellow; }
    #test[bgcolor="green"] > tr > td { color: white; }
  ]]>
  </style>
  <script type="text/javascript">
  <![CDATA[
    function test() {
      /* perform the attribute change */
      var test = document.getElementById('test');
      test.setAttribute('bgcolor', 'green');

      /* report on the results */
      var console = document.getElementById('console');
      console.appendChild(document.createTextNode("Test element now looks like:\n"));
      console.appendChild(document.createTextNode('<'+test.tagName));
      for (i = 0; i < document.getElementById('test').attributes.length; i++) {
        console.appendChild(document.createTextNode(' '+
            test.attributes.item(i).nodeName + '="' + 
            test.attributes.item(i).nodeValue + '"'));
      }
      console.appendChild(document.createTextNode('>...</'+test.tagName+'>'));
    }
  ]]>
  </script>
 </head>
 <body onload="window.setTimeout(test, 300)">
   <table bgcolor="red" width="100%" id="test"><tr><td>This text should be white on green.</td></tr></table>
   <pre id="console"></pre>
 </body>
</html>
