clientHeight, clientWidth, clientLeft, clientTop 속성 공총 예제

<DIV style="border:solid 1 red;width:400;margin-left:100;margin-right:100;padding-left:30;padding-right:20;background:#0ff">
<DIV id=obj style="overflow:scroll;width:300;height:100;border:solid 1 blue;margin:5px;padding:6px;background:#ffa">Div 내용<BR>
<BUTTON id=butObj onclick="showit()" style="margin:7px">클릭으로 내용보기</BUTTON>
</DIV>
</DIV>
<SCRIPT>
function showit(){
  br='<BR>';
  str='<TABLE border=1><TR><TH>';
  str+='<'+obj.nodeName+' id='+obj.id+'></TH><TH>';
  str+='<'+butObj.nodeName+' id='+butObj.id+'></TH></TR><COL style=background:#ffd>';
  str+='<TR><TD>obj.clientHeight='+obj.clientHeight+br;
  str+='obj.clientWidth='+obj.clientWidth+br;
  str+='obj.clientTop='+obj.clientTop+br;
  str+='obj.clientLeft='+obj.clientLeft+'</TD>';
  str+='<TD>butObj.clientHeight='+butObj.clientHeight+br;
  str+='butObj.clientWidth='+butObj.clientWidth+br;
  str+='butObj.clientTop='+butObj.clientTop+br;
  str+='butObj.clientLeft='+butObj.clientLeft+'</TD></TR>';
  str+='<TR><TD>obj.offsetHeight='+obj.offsetHeight+br;
  str+='obj.offsetWidth='+obj.offsetWidth+br;
  str+='obj.offsetTop='+obj.offsetTop+br;
  str+='obj.offsetLeft='+obj.offsetLeft+'</TD>';
  str+='<TD>butObj.offsetHeight='+butObj.offsetHeight+br;
  str+='butObj.offsetWidth='+butObj.offsetWidth+br;
  str+='butObj.offsetTop='+butObj.offsetTop+br;
  str+='butObj.offsetLeft='+butObj.offsetLeft+'</TD></TR>';
  str+='<TR><TD>obj.offsetParent.nodeName='+obj.offsetParent.nodeName+'</TD>';
  str+='<TD>butObj.offsetParent.id='+butObj.offsetParent.id+'</TD></TR></TABLE>';
  showArea.innerHTML=str;
}
</SCRIPT>
<DIV class=show id=showArea style=height:230>결과 표시창</DIV>