js가 문서 Area_javascript 기술에 대한 요소의 (수평, 수직) 좌표를 얻는 두 가지 방법

문서 영역 문서에서 페이지 요소의 가로, 세로 좌표를 구하는 두 가지 방법과 그 비교
js에서 요소의 이동을 제어하는 ​​과정에서 페이지 요소의 좌표 위치를 구하는 데 자주 사용됩니다. 여기서는 주로 다음 두 가지 방법을 요약합니다. 하나의 방법:

하나: 요소 개체의 offsetLeft/offsetTop 속성과 해당 offsetParent(존재하는 경우)를 오버레이하여 구현됩니다.
읽기 JavaScript 고급 프로그래밍 제3판 DOM 섹션 그 당시 우리는 페이지 요소의 오프셋을 얻으려면 이 요소의 offsetLeft 및 offsetTop을 해당 offsetParent의 동일한 속성에 추가하고 끝까지 반복해야 한다는 것을 배웠습니다. 루트 요소. 따라서 문서 영역에 대한 요소의 좌표 위치를 가져오려면 while 루프를 사용하여 offsetParent = null이 될 때까지 offsetParent의 offsetLeft/offsetTop을 계속해서 가져오면 됩니다.
js 코드:

코드 복사 코드는 다음과 같습니다.

// 문서 영역에 대한 요소의 좌표를 가져옵니다.
function getPosition(element) {
var ActualLeft = element.offsetLeft,
actualTop = element.offsetTop,
current = element. offsetParent; // offsetParent 요소 가져오기
// 루트 요소까지 반복
while (current !== null) {
actualLeft = current.offsetLeft
actualTop = current.offsetTop; >current = current.offsetParent ;
}
// 왼쪽 및 위쪽 좌표를 포함하는 객체 반환
return {
left: ActualLeft,
top: ActualTop
}

예시 스크린샷
:

firebug 테스트 결과 스크린샷: (참고: 다른 브라우저는 테스트를 통과했습니다!)

둘: getBoundingClientRect() 메서드를 통해 구현

getBoundingClientRect 메서드는 브라우저 창 창을 기준으로 페이지 요소의 왼쪽, 위쪽, 오른쪽 및 아래쪽 위치를 가져오는 데 사용됩니다. 반환되는 것은 위쪽, 왼쪽, 오른쪽, 아래쪽의 네 가지 속성을 가진 개체입니다. 이 메서드는 원래 IE 전용이지만 FF3.0 및 Opera9.5에서는 이미 이 메서드를 지원하므로 페이지 요소를 얻는 데 유용하다고 할 수 있습니다. 위치 효율성이 크게 향상됩니다. 또한 이 방법은 while 루프를 사용하지 않고 구현할 수치를 직접 구하므로 특히 복잡한 페이지에서 첫 번째 방법보다 성능이 좋습니다.
js 코드
:

코드 복사 코드는 다음과 같습니다.

// 문서 영역에 대한 요소의 좌표를 가져옵니다.

function getPosition(element){
var dc = document,
rec = element.getBoundingClientRect(),
_x = rec. left, // 요소 가져오기 브라우저 창을 기준으로 한 왼쪽 및 위쪽 좌표
_y = rec.top
// html 또는 body 요소의 스크롤 거리에 추가되는 요소의 상대 좌표 위치입니다. 문서 영역으로
_x = dc .documentElement.scrollLeft || dc.body.scrollLeft;
_y = dc.documentElement.scrollTop || dc.body.scrollTop; _x,
top: _y
};
}


테스트해본 결과 이 ​​방법은 문서를 기준으로 요소의 좌표 크기를 구하는 첫 번째 방법과 동일합니다. IE 브라우저의 하위 버전에는 몇 가지 차이점이 있습니다.

참고: html(IE 제외) 또는 본문(IE용) 요소의 가로 또는 세로 스크롤 거리를 더해야 한다는 점을 기억하세요!

결론: 위에서는 문서 영역을 기준으로 요소의 좌표 위치를 얻는 방법을 설명했습니다. 관련 문제가 발생하면 저에게 직접 연락하거나 의견을 남길 수 있습니다. 하단 좌표 하단을 얻으려면 왼쪽 및 상단 좌표의 크기를 요소 자체의 너비(elem.offsetWidth) 및 높이(elem.offsetHeight)에 추가하기만 하면 됩니다. 물론 offsetWidth 및 offsetHeight 속성은 패딩과 테두리를 계산합니다. 가장 좋은 방법은 getBoundingClientRect 메소드를 통해 요소를 얻는 것입니다. ps: 또한 이 메서드를 사용하여 개체의 오른쪽-왼쪽 = 요소 너비; 아래쪽-상단 = 요소 높이를 반환합니다. 테두리 없이 요소 자체의 너비와 높이를 얻을 수 있습니다.