<!-- Part of javalessons.com (c)2007 SEMM(NL) All rights reserved Author:P.Hamaker For educational purposes only.-->
<html><head>
<style type="text/css">
.someclass {
 background-color: #DDE6F1;
 font-style: italic ;
 color: navy;
}
</style>
<script type="text/javascript">
function doit( bt )
{
 var elm = null ;
 if ( bt.id == 'bt1' ) {
   elm = document.getElementById('bd');
   elm.style.fontFamily = 'monospace' ;
   elm.style.fontSize = 'x-large';
   elm.style.marginLeft = '5' ;
   
   elm = document.getElementById('in1');
   elm.style.backgroundColor = 'aqua';
   elm = document.getElementById('in2');
   elm.style.backgroundColor = '#ffff00';
   return ;
 }
 if ( bt.id == 'bt2' ) {
   elm = document.getElementById('bd');
   elm.style.marginLeft = '60' ;
   elm.style.fontFamily = 'serif' ;
   elm.style.fontSize = 'medium';
   
   elm = document.getElementById('dv');
   elm.style.backgroundColor = 'yellow' ;
   elm.style.width = '400px' ;
   elm.style.border = 'solid thick blue';
   elm.style.position = 'absolute';
   elm.style.right = '10px';
   elm.style.bottom = '10px';
   return ;
 }
 if ( bt.id == 'bt3' ) {
   elm = document.getElementById('bd');
   elm.className = 'someclass' ;
   return ;
 }
 elm = document.getElementById('dv');
 elm.innerHTML += 'more text...';
}
</script>
</head>
<body id="bd"
 style="font-family: sans-serif; font-size: large; margin-left: 20; margin-top: 30">
JavaScript Lesson CSS handling
<form>A.
<input type="text" id="in1" maxlength="10" size="12">
B.<input type="text" id="in2" maxlength="10" size="12" value="0">
<p>
<input id="bt1" type="button" value="Change CSS" onclick="doit(this)">
<input id="bt2" type="button" value="Change more" onclick="doit(this)">
<input id="bt3" type="button" value="Change body class" onclick="doit(this)">
<input id="bt4" type="button" value="Change div's body" onclick="doit(this)">
</form>
<div id="dv" style="border: solid green">This div can grow...</div>
</body></html>