div와 창 및 상위 dv_jquery 사이의 거리를 가져오는 jquery의 예-JS 튜토리얼-php.cn

div와 창 및 상위 dv_jquery 사이의 거리를 가져오는 jquery의 예

WBOY

풀어 주다： 2016-05-16 17:20:36

원래의

1344명이 탐색했습니다.

jquery에서 jquery.offset().top/left는 창에서 div까지의 거리를 가져오는 데 사용되고, jquery.position().top/left는 상위 div(창에서 div까지의 거리를 가져오는 데 사용됨) 절대 위치의 div여야 합니다).

(1) 먼저 jquery.offset().top / left를 소개합니다
css:

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

 
*{ margin: 0px; padding: 0px; } 
div{ margin: 0px auto; } 
.a{ width: 960px; 200px; } 
.parentBox{ 패딩: 30px; 너비: 960px; } 
.innerBox{ 패딩: 20px; 100px } 

html:

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

< ;body>

>innerBox

js:

복사 code 코드는 다음과 같습니다. $(function(){

var_offsetTop = $(".innerBox").offset().top; //280px

}) 

 
280px here= a.height/200px parentBox.padding-top/30px parentBox.margin-top/40px innerBox.margin-top/10px 
 //여기서 parentBox가 position을 설정하는 경우:relative; innerBox는 position:absolute;를 설정하고 innerBox는 top:40px를 설정합니다. 

//이때 _offsetTop의 값은 290px = a.height/200px parentBox.margin-top; /40px innerBox.margin-top/10px ineBox.top/40px;
//절대 정의는 상위 div의 왼쪽 상단 모서리 내부 테두리를 기준 좌표로 하기 때문입니다.
//innerBox가 테두리를 설정하는 경우 테두리 값을 추가합니다.

(2) jqury.position().top /left는 하위 div와 상위 div 사이의 거리를 가져오는 데 사용되며, 하위 div는 절대 위치에 있어야 합니다.
css:

코드 복사 코드는 다음과 같습니다. *{ 여백: 0px; 패딩: 0px; }

div{ 여백: 0px auto; }

.a{ 너비: 960px; 높이: 200px; ; 여백: 40px; 높이: 300px; 위치: 상대; } 
.innerBox{ 여백: 10px; 높이: 100px; 🎜>
 
html: 

코드 복사

코드는 다음과 같습니다.

innerBox

$(function(){
var_offsetTop = $(".innerBox").offset().top; //280px
})