pixelBottom, pixelBottom 속성 예제

frameObj
divObj
frameObj.style.pixelBottom= frameObj.style.pixelBottom= 0
divObj.style.pixelBottom= divObj.style.pixelBottom= 0
divObj.style.pixelRight= divObj.style.pixelRight= 0
frameObj.style.pixelRight= frameObj.style.pixelRight= 0

pixelBottom 속성으로 div 개체의 위치를 사용자 지역의 아래쪽에서 지정한다.

<SCRIPT>
function doSetShow(obj,typ,len){
  if (obj==frameObj){
    if (typ=='b') obj.style.pixelBottom=showA.innerHTML=len;
    if (typ=='r') obj.style.pixelRight=showC.innerHTML=len;
  } else {
    if (typ=='b') obj.style.pixelBottom=showB.innerHTML=len;
    if (typ=='r') obj.style.pixelRight=showD.innerHTML=len;
  }
}
</SCRIPT>
<STYLE>
table.samp tr td button {width:2em}
</STYLE>
<DIV style="height:100;border:solid 1 green"></DIV>
<DIV id=frameObj style="position:relative;width:200;height:100;border:solid 2 red">frameObj
<DIV id=divObj style="position:absolute;width:100;height:100;background:ffa;border:solid 1 blue">divObj</DIV>
</DIV>
<TABLE border=1 class=samp align=center>
<TR>
<TD>frameObj.style.pixelBottom=</TD>
<TD><BUTTON onclick="doSetShow(frameObj,'b',-50)">-50</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'b',-10)">-10</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'b',0)">0</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'b',10)">10</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'b',20)">20</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'b',50)">50</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'b',100)">100</BUTTON></TD>
<TD>frameObj.style.pixelBottom=</TD>
<TD width=40 align=right><SPAN id=showA style=color:red>0</SPAN></TD>
</TR>
<TR>
<TD>divObj.style.pixelBottom=</TD>
<TD><BUTTON onclick="doSetShow(divObj,'b',-50)">-50</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'b',-10)">-10</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'b',0)">0</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'b',10)">10</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'b',20)">20</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'b',50)">50</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'b',100)">100</BUTTON></TD>
<TD>divObj.style.pixelBottom=</TD>
<TD width=40 align=right><SPAN id=showB style=color:blue>0</SPAN></TD>
</TR>
<TR>
<TD>divObj.style.pixelRight=</TD>
<TD><BUTTON onclick="doSetShow(divObj,'r',-50)">-50</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'r',-10)">-10</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'r',0)">0</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'r',10)">10</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'r',20)">20</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'r',50)">50</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(divObj,'r',100)">100</BUTTON></TD>
<TD>divObj.style.pixelRight=</TD>
<TD width=40 align=right><SPAN id=showD style=color:blue>0</SPAN></TD>
</TR>
<TR>
<TD>frameObj.style.pixelRight=</TD>
<TD><BUTTON onclick="doSetShow(frameObj,'r',-50)">-50</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'r',-10)">-10</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'r',0)">0</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'r',10)">10</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'r',20)">20</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'r',50)">50</BUTTON></TD>
<TD><BUTTON onclick="doSetShow(frameObj,'r',100)">100</BUTTON></TD>
<TD>frameObj.style.pixelRight=</TD>
<TD width=40 align=right><SPAN id=showC style=color:blue>0</SPAN></TD>
</TR>
</TABLE>