example/x3dom_simpleManip.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>Simple attribute update</title>
		<style>
		p.case { clear: both; border-top: 1px solid #888; }
		</style>
        <link rel="stylesheet" type="text/css" href="x3dom.css" />
	</head>
       
<body>

    <h1>Simple attribute update</h1>
	
	<p class="case"> 
		<X3D xmlns="http://www.web3d.org/specifications/x3d-namespace"  showStat="false" showLog="false" x="0px" y="0px" width="400px" height="400px" altImg="helloX3D-alt.png">
          <Scene>
            <Viewpoint position='0 0 10' />
             <Shape>
                <Appearance>
                    <Material diffuseColor='1 0 0.5' />	
                </Appearance>
                <Box DEF='box'/>
             </Shape>
          </Scene>
        </X3D>
	</p>
	
	<script type="text/javascript"><![CDATA[
	
	var solid = true;
	
	function toggleRendering()
	{
		var button = document.getElementById("color");
		
		solid = !solid;
		
		if (solid)
			button.value = "Blue";
		else
			button.value = "Red";
		
		var mat = document.getElementsByTagName("Material");
		var i = 0, n = mat.length;
		
		var aMat = mat[0];
		aMat.setAttribute("diffuseColor", (!solid ? "0 0 1" : "1 0 0"));
		
		return false;
	}
	
	]]></script>
	
	<p class="case"> &nbsp; 
	Dynamic material update
	<input type="button" id="color" value="Change Color" onclick="toggleRendering();" />
	</p>
		
	<script type="text/javascript" src="x3dom.js"></script>
   

</body>
</html>