예제는 시계의 너비와 높이를 모체에 상대적으로 조정한다. 클릭하고 윈도우의 크기를 변경시켜 보라.

<DIV id="container" style="background-color:fff;border:solid 1 blue;padding:5;margin-left:100;width:300">
<DIV id="theClock" style=font-size:20;line-height:1.2em;margin-left:10;height:67;width:300> </DIV>
<SCRIPT>
var scale=15;
function startClock(){
  window.setInterval("showClock()", 1000);
  showClock();
}
function showClock(){
  var now=Date();
  var secs=now.substring(11,19);
  var docHH=document.body.offsetHeight;
  var docWW=document.body.offsetWidth;
  if ((docHH*scale)>docWW) docHH=docWW/scale;
  document.all.theClock.innerText=secs;
  document.all.theClock.style.fontSize=docHH;
  str='document.body.offsetWidth='+docWW+'<BR>';
  str+='document.body.offsetHeight='+docHH+'<BR>';
  str+='theClock.offsetLeft='+theClock.offsetLeft+'<BR>';
  str+='theClock.offsetTop='+theClock.offsetTop+'<BR>';
  str+='theClock.offsetParent.id='+theClock.offsetParent.id+'<BR>';

  showA.innerHTML=str;
}
</SCRIPT>

<BUTTON onclick="startClock()">클릭하여 시계를 작동하라.</BUTTON>
<DIV id=showA>결과 표시창</DIV>
</DIV>

<DIV id="containerB" style="background-color:fff;border:solid 1 blue;padding:5;margin-left:100;width:300">
<DIV id="divBox" style="overflow:scroll; width:250; height:100;margin:10;border:solid 1 red">DIV 개체</DIV>
<BUTTON onclick="ShowIt()">client height</BUTTON>
<DIV id=showB>결과 표시창</DIV>
<SCRIPT>
function ShowIt(){
  str='divBox.offsetParent.id='+divBox.offsetParent.id+'<BR>';
  str+='divBox.offsetWidth='+divBox.offsetWidth+'<BR>';
  str+='divBox.offsetHeight='+divBox.offsetHeight+'<BR>';
  str+='divBox.offsetLeft='+divBox.offsetLeft+'<BR>';
  str+='divBox.offsetTop='+divBox.offsetTop+'<BR><BR>';

  str+='divBox.clientWidth='+divBox.clientWidth+'<BR>';
  str+='divBox.clientHeight='+divBox.clientHeight+'<BR>';
  str+='divBox.clientLeft='+divBox.clientLeft+'<BR>';
  str+='divBox.clientTop='+divBox.clientTop+'<BR>';

  showB.innerHTML=str;
}
</SCRIPT>
</DIV>