Dom：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较

IE6.0、FF1.06+：
clientWidth = width +padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

具体效果请参见下面的代码：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" lang ="gb2312" >
< head >
< head >
< title > 代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 </ title >
< meta  http-equiv ="content-type"  content ="text/html;charset=gb2312"   />
< meta  name ="author"  content ="枫岩,CnLei.y.l@gmail.com" >
< meta  name ="copyright"  content ="http://www.cnlei.com" />
< meta  name ="description" content ="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较" />
< style  type ="text/css"  media ="all" >
body  { font-size : 14px ; }
a,a:visited  { color : #00f ; }
#Div_CnLei  {
width : 300px ;
height : 200px ;
padding : 10px ;
border : 10px solid #ccc ;
background : #eee ;
font-size : 12px ;
}
#Div_CnLei p  { margin : 0 ; padding : 10px ; background : #fff ; }
</ style >

< script  type ="text/javascript" >
function  Obj(s){
 returndocument.getElementById(s) ? document.getElementById(s):s;
}
function  GetClientWidth(o){
  return  Obj(o).clientWidth;
}
function  GetClientHeight(o){
  return  Obj(o).clientHeight;
}
function  GetOffsetWidth(o){
  return  Obj(o).offsetWidth;
}
function  GetOffsetHeight(o){
  return  Obj(o).offsetHeight;
}
</ script >
</ head >
< body >
< p > 点击下面的链接: </ p >
< div  id ="Div_CnLei" >
< p >< ahref ="javascript:alert(GetClientWidth('Div_CnLei'));" > GetClientWidth(); </ a >    < ahref ="javascript:alert(GetClientHeight('Div_CnLei'));" > GetClientHeight(); </ a ></ p >
< p >< ahref ="javascript:alert(GetOffsetWidth('Div_CnLei'));" > GetOffsetWidth(); </ a >    < ahref ="javascript:alert(GetOffsetHeight('Div_CnLei'));" > GetOffsetHeight(); </ a ></ p >
</ div >
< div  id ="Description" >
< p >< strong > IE6.0、FF1.06+： </ strong >< br />
clientWidth = width + padding = 300+10×2 = 320 < br  />
clientHeight = height + padding = 200+10×2 = 220 < br  />
offsetWidth = width + padding + border = 300+10×2+10×2= 340 < br />
offsetHeight = height + padding + border = 200+10×2+10×2 =240 </ p >
< p >< strong > IE5.0/5.5： </ strong >< br  />
clientWidth = width - border = 300-10×2 = 280 < br  />
clientHeight = height - border = 200-10×2 = 180 < br  />
offsetWidth = width = 300 < br  />
offsetHeight = height = 200 </ p >
</ div >
</ body >
</ html >