개체의 offsetTopoffsetLeft 속성들을 지정한 용기개체의 참조를 반환한다.

인수
: (속성 개체)
속성값은 개체의 offsetTopoffsetLeft 속성들을 지정한 용기개체의 참조이다.

이 속성은 읽기전용이며 디폴트값은 없다.

특기

대부분의 경우 offsetParent 속성은 body 개체를 반환한다.

주의 : IE5에서는 offsetParent 속성은 td 개체에서 table 개체를 반환하고, IE5에서는 tr 개체를 반환한다. 바로 table의 칸(td, th) 용기 개체를 반환받기 위해서는 parentElement을 사용할 수 있다.
적용
개체scriptHTML규격IE
참조

offsetHeight offsetWidth offsetLeft offsetTop offsetParent

boundingHeight boundingWidth boundingLeft boundingTop


앞 개체
tddivObj 개체
뒷 개체



<HTML>
<HEAD>
<SCRIPT>
function showPosition(job){
  if (job==1) obj=document.all.tableObj;
  else if (job==2) obj=document.all.tdObj;
  else if (job==3) obj=document.all.tddivObj;
  str='개체 obj : '+obj.nodeName+' id='+obj.id+'<BR>';
  str+='용기 개체 : obj.offsetParent.tagName='+obj.offsetParent.tagName+', obj.parentElement.id='+obj.parentElement.id+'<BR>';
  str+='obj.offsetLeft='+obj.offsetLeft+'<BR>';
  str+='obj.offsetTop='+obj.offsetTop+'<BR>';
  str+='obj.offsetHeight='+obj.offsetHeight+'<BR>';
  str+='obj.offsetWidth='+obj.offsetWidth+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<STYLE>
button{width:150}
</STYLE>
</HEAD>
<BODY id="bodyObj" onload="showPosition(1)">
<DIV id="divObj" style="text-align:right;border:solid 1 blue;padding:10">
<TABLE id="tableObj" border=1 cellpadding=5 width=400>
<TR id="trObj">
<TD>앞 개체</TD>
<TD id="tdObj" style="background-color:ffffaa"><DIV id="tddivObj" style="background-color:ffaaff;width:200">tddivObj 개체</DIV></TD>
<TD>뒷 개체</TD>
</TR>
</TABLE>
</DIV>
<BUTTON onclick="divObj.style.textAlign='left';showPosition(1)">테이블 왼쪽으로</BUTTON>
<BUTTON onclick="divObj.style.textAlign='center';showPosition(1)">테이블 중앙으로</BUTTON>
<BUTTON onclick="divObj.style.textAlign='right';showPosition(1)">테이블 오른쪽으로</BUTTON><BR>
<BUTTON onclick="tdObj.style.textAlign='left';showPosition(2)">TD 왼쪽으로</BUTTON>
<BUTTON onclick="tdObj.style.textAlign='center';showPosition(2)">TD 중앙으로</BUTTON>
<BUTTON onclick="tdObj.style.textAlign='right';showPosition(2)">TD 오른쪽으로</BUTTON><BR>
<BUTTON onclick="tddivObj.style.textAlign='left';showPosition(3)">TD DIV 왼쪽으로</BUTTON>
<BUTTON onclick="tddivObj.style.textAlign='center';showPosition(3)">TD DIV 중앙으로</BUTTON>
<BUTTON onclick="tddivObj.style.textAlign='right';showPosition(3)">TD DIV 오른쪽으로</BUTTON><BR>
<DIV id=showA></DIV>
</BODY>
</HTML>