<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DHTML: Changing Presentational Attributes</title>
  <script type="text/javascript">
  <![CDATA[
    function test() {
      /* perform the attribute change */
      var test = document.getElementById('test');
      test.setAttribute('color', '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)">
   <p><font color="red" id="test">This text should be green.</font></p>
   <pre id="console"></pre>
 </body>
</html>
