一个彻底解决client,scroll,offset(Width,Top,Height,Left)疑惑的HTML页面

我不是编写JAVASCRIPT脚本的高手，我只是喜欢把有些问题弄的非常清楚，在网上，我看到很多人学习JAVASCRIPT的时候遇到这样一些问题，scrollWidth,scrollHeight,scrollTop,scrollLeft
offsetWidht,offsetHeight,offsetTop,offsetLeft
clientWidht,clientHeight,clientTop,clientLeft这些属性到底指那些东西啊，他们的区别又在那里呢，关于概念的解析我今天就不在这里跟大家多谈，因为我也描述不清楚，唯独通过实践，才能让大家真正理解，其中细微的区别代码如下，大家直接复制代码，然后保存为html即可运行，大家可以在页面里面反复测试，输入不同数值，看了以后，测试了以后，应该都会明白其中他们细微的区别。<!--
    yhbzwbs收集
    --------------------------------------------
    scrollWidth,scrollHeight,scrollTop,scrollLeft
    offsetWidht,offsetHeight,offsetTop,offsetLeft
    clientWidht,clientHeight,clientTop,clientLeft
    ---------------------------------------------
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function getOjectAttribute(param)
{
      var obj = document.getElementById("TestDiv");
      var num;
   switch(param)
   {
      case "scrollWidth":
          alert(obj.scrollWidth);
     break;
   case "scrollHeight":
          alert(obj.scrollHeight);
     break;
    
   case "offsetWidth":
          alert(obj.offsetWidth);
     break;
   case "offsetHeight":
          alert(obj.offsetHeight);
     break;
    
   case "clientWidth":
          alert(obj.clientWidth);
     break;
   case "clientHeight":
          alert(obj.clientHeight);
     break;
  
   case "scrollLeft":
          alert(obj.scrollLeft);
     break;
   case "scrollTop":
          alert(obj.scrollTop);
     break;
    
   case "offsetLeft":
          alert(obj.offsetLeft);
     break;
   case "offsetTop":
          alert(obj.offsetTop);
     break;
    
    
   case "clientLeft":
          alert(obj.clientLeft);
     break;
   case "clientTop":
          alert(obj.clientTop);
     break;
   }
}function SetDiv()
{
     var obj = document.getElementById("TestDiv");
var result="";
var wd = document.getElementById("widthtext").value;
if(wd!="")
{
     obj.style.width=wd;
}var ht = document.getElementById("heighttext").value;
if(ht!="")
{
     obj.style.height=ht;
}var mgleft = document.getElementById("mglefttext").value;
if(mgleft!="")
{
     obj.style.marginLeft=mgleft;
}var mgright = document.getElementById("mgrighttext").value;
if(mgright!="")
{
     obj.style.marginRight=mgright;
}var mgtop = document.getElementById("mgtoptext").value;
if(mgtop!="")
{
     obj.style.marginTop=mgtop;
}var mgbottom = document.getElementById("mgbottomtext").value;
if(mgbottom!="")
{
     obj.style.marginBottom=mgbottom;
}
var pdbottom = document.getElementById("pdbottomtext").value;
if(pdbottom!="")
{
     obj.style.paddingBottom=pdbottom;
}
var pdleft = document.getElementById("pdlefttext").value;
if(pdleft!="")
{
     obj.style.paddingLeft=pdleft;
}
var pdright = document.getElementById("pdrighttext").value;
if(pdright!="")
{
     obj.style.paddingRight=pdright;
}
var pdtop = document.getElementById("pdtoptext").value;
if(pdtop!="")
{
     obj.style.paddingTop=pdtop;
}var info = document.getElementById("divinfo").value;
if(info!="")
{
     obj.innerHTML=info;
}var overflows = document.all["rddisplay"];
for(var i=0;i<overflows.length;i++)
{
      if(overflows[i].checked)
   {
       obj.style.overflow = overflows[i].value;
   }
}
result+="TestDiv:width="+obj.style.pixelWidth+"--height="+obj.style.pixelHeight+"<br>";
result+="scroll:scrollWidth="+obj.scrollWidth+"---scrollHeight="+obj.scrollHeight+"---scrollLeft="+obj.scrollLeft+"---scrollTop="+obj.scrollTop+"<br>";
result+="offset:offsetWidth="+obj.offsetWidth+"---offsetHeight="+obj.offsetHeight+"---offsetLeft="+obj.offsetLeft+"---offsetTop="+obj.offsetTop+"<br>";
result+="client:clientWidth="+obj.clientWidth+"---clientHeight="+obj.clientHeight+"---clientLeft="+obj.clientLeft+"---clientTop="+obj.clientTop+"<br>";
document.getElementById("ResultDiv").innerHTML=result;
document.getElementById("ResultDiv").style.fontWeight="bold";
}function ScrollDiv()
{
     var obj = document.getElementById("TestDiv");
var vscrollHeight = obj.scrollHeight;
var vclientHeight = obj.clientHeight;
var vscrollTop = obj.scrollTop;
if(vscrollHeight>vclientHeight)
{
     vscrollTop=vscrollTop+5;
     obj.scrollTop=vscrollTop;
}
SetDiv();
if((vscrollHeight-obj.scrollTop)==obj.clientHeight)
{
     obj.scrollTop=0;
   }
setTimeout("ScrollDiv()",50);
}
</script>
</head>
<body>
<form name="form1">
<div id="TestDiv" style=" background-color:#CC0000;">
   this is test project for study javascript
</div>
<input type="button" value="GetscrollWidth" onclick="getOjectAttribute('scrollWidth');"/>
<input type="button" value="GetscrollHeight" onclick="getOjectAttribute('scrollHeight');"/>
<input type="button" value="GetoffsetWidth" onclick="getOjectAttribute('offsetWidth');"/>
<input type="button" value="GetoffsetHeight" onclick="getOjectAttribute('offsetHeight');"/>
<input type="button" value="GetclientWidth" onclick="getOjectAttribute('clientWidth');"/>
<input type="button" value="GetclientHeight" onclick="getOjectAttribute('clientHeight');"/>
<br />
<input type="button" value="GetscrollLeft" onclick="getOjectAttribute('scrollLeft');"/>
<input type="button" value="GetscrollTop" onclick="getOjectAttribute('scrollTop');"/>
<input type="button" value="GetoffsetLeft" onclick="getOjectAttribute('offsetLeft');"/>
<input type="button" value="GetoffsetTop" onclick="getOjectAttribute('offsetTop');"/>
<input type="button" value="GetclientLeft" onclick="getOjectAttribute('clientLeft');"/>
<input type="button" value="GetclientTop" onclick="getOjectAttribute('clientTop');"/>
<br />
<input type="button" value="ScrollTheDiv" onclick="ScrollDiv();"/>
<br />
<br />
<fieldset>
Width:<input type="text" id="widthtext" /><br />
Height:<input type="text" id="heighttext"/><br />
Margin-Left:<input type="text" id="mglefttext" size="5" />
Margin-Right:<input type="text" id="mgrighttext" size="5" />
Margin-Top:<input type="text" id="mgtoptext" size="5" />
Margin-Bottom:<input type="text" id="mgbottomtext" size="5" />
<br />
Padding-Left:<input type="text" id="pdlefttext" size="5" />
Padding-Right:<input type="text" id="pdrighttext" size="5" />
Padding-Top:<input type="text" id="pdtoptext" size="5" />
Padding-Bottom:<input type="text" id="pdbottomtext" size="5" />
<br />
OverFlow:<input type="radio" name="rddisplay" value="auto"/>auto
<input type="radio" name="rddisplay" value="hidden"/>hidden
<input type="radio" name="rddisplay" value="inherit"/>inherit
<input type="radio" name="rddisplay" value="scroll"/>scroll
<input type="radio" name="rddisplay" value="scroll"/>visible
<br />
innerText:
<br />
<textarea name="divinfo" id="divinfo" cols="100" rows="10"></textarea>
<br />
<input type="button" value="BuildStyle" onclick="SetDiv();"/>
<input type="reset" value="reset" />
</fieldset>
<br />
<fieldset>
Result:
<div id="ResultDiv"></div>
</fieldset>
<br /></form>
</body>
</html>