                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

想要完全理解清楚这部分内容可以复制以下代码，自己动手试试测量结果，要不断调整窗口大小多做试验啊！

<!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>