posTop, posLeft, pixelTop, pixelLeft, top, left 속성 예제

이미지를 클릭해보라.
결과 표시창

이미지도 클릭해보라. posLeft 속성을 사용하여 img 개체를 이동시킨다.

<SCRIPT>
function doShow(){
  str='imgObj.style.posTop='+imgObj.style.posTop+'<BR>';
  str+='imgObj.style.posLeft='+imgObj.style.posLeft+'<BR>';
  str+='imgObj.style.pixelTop='+imgObj.style.pixelTop+'<BR>';
  str+='imgObj.style.pixelLeft='+imgObj.style.pixelLeft+'<BR>';
  str+='imgObj.style.top='+imgObj.style.top+'<BR>';
  str+='imgObj.style.left='+imgObj.style.left+'<BR>';

  showB.innerHTML=str;
}
function moveAll(){
  if (imgObj.style.posLeft>10){
    imgObj.style.posLeft -=10;
    imgObj.style.posTop+=4;
    doShow();
    window.setTimeout('moveAll();', 100);
  }
}
</SCRIPT>

<IMG src=../../../gif/arbackv.gif id=imgObj
  style="position:relative;top:10;left:400"
  onclick="this.style.posLeft-=20;this.style.posTop+=8;doShow();" alt="이미지를 클릭해보라.">
<BUTTON onclick="moveAll()">계속 이동</BUTTON>
<BUTTON onclick="imgObj.style.top='10';imgObj.style.left='400';">처음 위치로</BUTTON>
<DIV id=showB>결과 표시창</DIV>