Jquery_jquery에서 offset()과 position()의 차이점 분석-JS 튜토리얼-php.cn

Jquery_jquery에서 offset()과 position()의 차이점 분석

WBOY

풀어 주다： 2016-05-16 16:15:30

원래의

1120명이 탐색했습니다.

이 기사에서는 Jquery의 offset()과 position()의 차이점을 예제를 통해 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. Jquery의 offset()

현재 뷰포트에서 일치하는 요소의 상대 오프셋을 가져옵니다. 위치는 요소의 상위 요소 또는 상위 요소의 위치 속성에 관계없이 항상 문서를 기준으로 계산됩니다.
반환된 객체에는 top과 left라는 두 가지 정수 속성이 포함되어 있습니다. 이 방법은 보이는 요소에만 작동합니다.

예:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { margin-left:10px; } 
</style> 
<script src="js/jquery.js"></script> 
</head> 
<body> 
 <p>Hello</p><p>2nd Paragraph</p> 
<script>
var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );
</script> 
</body> 
</html>

로그인 후 복사

2. Jquery의 위치()

상위 요소를 기준으로 일치하는 요소의 오프셋을 가져옵니다. 보다 일반적으로는 position:relative를 포함하는 요소의 가장 가까운 상위 요소 또는 조상 요소의 위치입니다. 그러한 상위 요소 또는 상위 요소가 발견되지 않으면 위치는 문서(즉, 뷰포트의 왼쪽 위 모서리)를 기준으로 계산됩니다. 반환된 객체에는 top 및 left라는 두 가지 정수 속성이 포함됩니다. 정확한 계산을 위해 채우기, 테두리 및 채우기 속성에 픽셀 단위를 사용하십시오.

예:

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
 div { padding: 15px;} 
 p { margin-left:10px; } 
 </style> 
 <script src="jquery脚本URL"></script> 
</head> 
<body> 
<div> 
 <p>Hello</p> 
</div> 
<p></p> 
<script> 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").text( "left: " + position.left + ", top: " + position.top ); 
</script> 
</body> 
</html>

로그인 후 복사

3. offset()과 position()의 차이점

1. offset() 메서드는 현재 창에서 일치하는 요소의 상대 오프셋을 가져옵니다. 여기서 창은 브라우저의 메뉴 표시줄 등을 제외한 현재 페이지의 창을 의미합니다. 물론 전체 브라우저를 제어하기 위해 jquery를 사용할 필요는 없습니다. 우리가 제어하려는 것은 페이지 창입니다.

2. position() 메서드는 상위 요소를 기준으로 일치하는 요소의 오프셋을 가져옵니다. 즉, 절대 위치 또는 상대 위치를 사용하여 가장 가까운 상위 요소를 기준으로 요소의 오프셋을 얻습니다. 모든 상위 요소가 기본 정적 위치 지정 모드인 경우 처리 방법은 현재 창의 오프셋인 offset()과 동일합니다.

3. position() 메서드를 사용할 때 모든 상위 요소가 기본 위치 지정(정적) 모드인 경우 처리 방법은 현재 창의 상대 오프셋인 offset()과 동일합니다

4. offset() 메서드를 사용하면 요소의 위치나 상위 요소의 위치에 관계없이 현재 뷰포트를 기준으로 요소의 오프셋을 얻습니다.

5. 일반적인 상황에서 표시할 요소 B가 요소 A의 동일한 상위 요소에 저장되어 있는 경우(즉, B는 A의 형제 노드) 이때 position()을 사용하는 것이 가장 적합합니다. 표시할 요소 B가 DOM의 상단 또는 하단에 저장되어 있는 경우(즉, 상위 요소가 본문인 경우) 이때 offset()을 사용하는 것이 가장 좋습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.