Changing style/CSS with javascript. We are given example with inline js.
Example
<html>
<head> 
<style type="text/css">
  #box1   {    
position: absolute;   
 top: 20px;    
left: 50px;  
  width: 200px;  
  border: solid #ff0000 3px;
    background-color: #ffff00;  
  color: #000000;    padding: 10px;  
 }

</style>
<script language="JavaScript">
 function change(){ 
	document.getElementById("box1").style.backgroundColor="#00ff00";   
     	document.getElementById("box1").style.width="100%";     
   	document.getElementById("box1").style.height="100%";   
     	document.getElementById("box1").style.Color="#ff0000";  
                        } 
function change_back(){
	document.getElementById("box1").style.borderColor="#ff0000";	
document.getElementById("box1").style.backgroundColor="#ffff00";	
document.getElementById("box1").style.color="#000000";       
 	document.getElementById("box1").style.width="200px";   
     	document.getElementById("box1").style.height="200px";   
                    }
</script>
</head>
<body>
<div id="box1" onMouseOver="change()" onMouseOut="change_back()">
      <h3>This is a dynamically styled box.</h3>
</div>
</body>
</html> 


All Tutorial => 12345678910111213





Write Comment