개체의 offsetTop과 offsetLeft 속성들을 지정한 용기개체의 참조를 반환한다.
이 속성은 읽기전용이며 디폴트값은 없다.
대부분의 경우 offsetParent 속성은 body 개체를 반환한다.
| 개체 | script | HTML | 규격 | IE |
|---|
offsetHeight offsetWidth offsetLeft offsetTop offsetParent
| 앞 개체 | 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>