Jquery_jquery의 offset() 및 position()에 대한 심층 분석

먼저 두 메소드의 정의를 살펴보겠습니다.
offset():
현재 뷰포트에서 일치하는 요소의 상대 오프셋을 가져옵니다.
반환된 객체에는 top과 left라는 두 가지 정수 속성이 포함되어 있습니다. 이 방법은 보이는 요소에만 작동합니다.
position():
상위 요소를 기준으로 일치하는 요소의 오프셋을 가져옵니다.
반환된 객체에는 top과 left라는 두 가지 정수 속성이 포함되어 있습니다. 정확한 계산을 위해 채우기, 테두리 및 채우기 속성에 픽셀 단위를 사용하십시오. 이 방법은 보이는 요소에만 작동합니다.
정말 간단하죠? 연습은 참된 지식을 가져옵니다.
먼저 jquery 프레임워크 소스 코드에서 position()을 얻는 방법을 살펴보겠습니다.

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

// *real* offsetParent 가져오기
var offsetParent = this.offsetParent(),
// 올바른 오프셋 가져오기
offset = this.offset (),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset()// 요소 빼기 margins
// 참고: 요소에 margin: auto가 있는 경우 offsetLeft 및 marginLeft
//는 Safari에서 동일하므로 offset.left가 0이 됩니다.
offset.top -= num( this, ' marginTop' );
offset.left -= num( this, 'marginLeft' );
// offsetParent 테두리 추가
parentOffset.top = num( offsetParent, 'borderTopWidth' ); left = num( offsetParent, 'borderLeftWidth' );
// 두 오프셋 빼기
results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset. 왼쪽
};


두 페이지의 차이점을 테스트하려면 아래 페이지를 클릭하세요.

오프셋 및 위치 테스트 1<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <style type="text/css"> body{margin:15px;width:960px;} .parent{ border:3px solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } .child{ background:#666; width:200px; height:200px; color:#fff; } .copyright{ position:absolute; right:0; } </style> <div class="parent" style="float:right"> </div>