js가 문서 Area_javascript 기술에 대한 요소의 (수평, 수직) 좌표를 얻는 두 가지 방법-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 17:33:32

원래의

1499명이 탐색했습니다.

문서 영역 문서에서 페이지 요소의 가로, 세로 좌표를 구하는 두 가지 방법과 그 비교
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: 또한 이 메서드를 사용하여 개체의 오른쪽-왼쪽 = 요소 너비; 아래쪽-상단 = 요소 높이를 반환합니다. 테두리 없이 요소 자체의 너비와 높이를 얻을 수 있습니다.