객체의 좌표 값 추출

객체의 좌표 값 추출

 

익스플로러 6 / 파이어폭스 2 에서 테스트 되었습니다.

 

<HTML>
<HEAD>
 <SCRIPT type = "text/javascript">
  /**
   * 좌표 값을 측정한다.
   *
   * @param obj 측정 요망 객체
   */
  function getBounds( obj ) {
   var ret = new Object();

   if(document.all) {
    var rect = obj.getBoundingClientRect();
    ret.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
    ret.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
    ret.width = rect.right - rect.left;
    ret.height = rect.bottom - rect.top;
   } else {
    var box = document.getBoxObjectFor(obj);
    ret.left = box.x;
    ret.top = box.y;
    ret.width = box.width;
    ret.height = box.height;
   }

   return ret;
  }

  /**
   * 버튼 객체의 좌표 추출
   */
  function getThisCoordi() {
   var obj = getBounds( document.getElementById("testBtn") );

   alert( "left : " + obj.left + ", top : " + obj.top + ", width : " + obj.width + ", height : " + obj.height );
  }
 </SCRIPT>
</HEAD>
<BODY>
<P>&nbsp;</P>
<CENTER><INPUT type = "button" id = "testBtn" value = "테스트" onClick = "getThisCoordi()"/></CENTER>
</BODY>
</HTML>

댓글