javascript는 페이지 요소의 위치를 ​​정확하게 얻습니다.javascript 기술

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

//요소의 x 좌표 가져오기
function pageX(elem) {
return elem.offsetParent?(elem.offsetLeft pageX(elem.offsetParent)):elem.offsetLeft
}
//요소의 y 좌표 가져오기
function pageY(elem) {
return elem.offsetParent?(elem.offsetTop pageY(elem.offsetParent)):elem.offsetTop;
}

이 위대한 스승이 있었던 것 같습니다. 이 책을 출판할 때 서두르고 실수도 많았습니다. 결국 스승님도 이 두 기능에 문제가 있다는 것을 발견하고 이를 JQuery에 적용하지 않았습니다. 누적 방식으로 계산되기 때문에 하나의 요소에 문제가 있는 한 레이어별로 증가할 수 있으므로 스타일 속성을 정확하게 얻을 때 이 방법을 포기합니다. 주요 계산 오류는 마스터의 결론을 참조하세요.
테이블 테두리 오프셋 처리
다른 요소 내에서 스크롤 오프셋
> 절대 위치에 있는 요소를 잘못 계산했습니다.


IE의 getBoundingClientRect 메소드를 지원하는 모든 새로운 브라우저를 통해 더 간단하고 빠르며 안전한 방법을 사용하여 페이지 요소를 찾을 수 있습니다. getBoundingClientRect는 브라우저의 시각적 영역에 있는 요소의 네 모서리 좌표인 집합을 반환합니다.

그러나 IE의 표준 모드에는 이상한 문제가 있습니다. html 요소에는 테두리가 있고 기본값은 2px이며 수정할 수 없습니다. 자세한 내용은

http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx를 참조하세요. 이 메서드는 클라이언트의 왼쪽 위 모서리를 기준으로 사각형 결합의 왼쪽, 위쪽, 오른쪽 및 아래쪽 좌표를 노출하는 개체를 검색합니다. Microsoft Internet Explorer 5에서 창의 왼쪽 위는 2,2입니다. (픽셀) 실제 고객과 관련하여

몇 가지 테스트를 해보겠습니다(각각 IE6과 IE8에서 수행하세요):

1. 표준 모드, HTML 테두리 재설정 없음

<meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> html, body{ /* border: 0; */ } </style>getBoundingClientRect<title> </title> <p>旖</p>