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

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
})

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.