page_javascript 기술에서 요소의 오프셋을 가져오는 js 메소드 요약

JS를 사용하여 효과를 만들 때 페이지 요소의 오프셋을 가져와야 하는 경우가 많습니다(예: 팁 프롬프트 상자 기능). 오프셋을 얻으려면 문서를 기준으로 오프셋을 직접 얻거나 뷰포트(뷰포인트)에 페이지 스크롤 양(스크롤)을 더한 값을 기준으로 오프셋을 얻을 수 있습니다.

1. 문서를 기준으로 오프셋을 가져옵니다

function getOffsetSum(ele){
  var top= 0,left=0;
  while(ele){
    top+=ele.offsetTop;
    left+=ele.offsetLeft;
    ele=ele.offsetParent;
  }
  return {
    top:top,
    left:left
  }
}

offsetParent를 위쪽으로 반복하면 문서를 기준으로 한 오프셋, 즉 페이지를 기준으로 한 오프셋을 계산할 수 있습니다.

이 방법의 문제점:

1) 테이블 및 인라인 프레임 레이아웃을 사용하는 페이지의 경우 브라우저마다 요소를 구현하는 방식의 차이로 인해 얻은 결과가 정확하지 않습니다.

2) 한 번에 한 수준씩 offsetParent를 검색해야 할 때마다 효율성이 너무 낮습니다.

2. 뷰포트(뷰포인트)와 페이지의 스크롤 양(스크롤)을 기준으로 오프셋을 가져옵니다.

function getOffsetRect(ele){
      var box=ele.getBoundingClientRect();
      var body=document.body,
        docElem=document.documentElement;
      //获取页面的scrollTop,scrollLeft(兼容性写法)
      var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
        scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
      var clientTop=docElem.clientTop||body.clientTop,
        clientLeft=docElem.clientLeft||body.clientLeft;
      var top=box.top+scrollTop-clientTop,
        left=box.left+scrollLeft-clientLeft;
      return {
        //Math.round 兼容火狐浏览器bug
        top:Math.round(top),
        left:Math.round(left)
      }
    }

이 메소드는 getBoundingClientRect() 메소드를 통해 뷰포트를 기준으로 한 오프셋과 페이지의 스크롤 양에서 clientTop, clientLeft를 뺀 값을 직접 얻습니다(IE8 이하 브라우저는 (2,2)를 시작점 좌표로 사용하므로 값에서 시작점 좌표를 빼야 합니다. 다른 브라우저에서는 (0,0)을 시작점 좌표로 사용합니다.

getBoundingClientRect() 메소드는 IE, ff3, safari4, Orear9,5, Chrome을 지원합니다.

3.호환성 글쓰기

//获取元素相对于页面的偏移
function getOffset(ele){
  if(ele.getBoundingClientRect){
    return getOffsetRect(ele);
  }else{
    return getOffsetSum(ele);
  }
}

getBoundingClientRect() 메서드를 지원하는 브라우저의 경우 getOffsetRect() 메서드를 사용하고, 이를 지원하지 않는 브라우저의 경우 getOffsetSum() 메서드를 사용하세요.

이상 내용이 이 글의 전체 내용입니다. 자바스크립트를 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.