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>
