.offset()
.offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다.
기본형 1
.offset()
선택한 요소의 좌표를 가져옵니다.
예를 들어
var abc = $( 'h1' ).offset();
는 h1 요소의 좌표를 변수 abc에 저장합니다.
기본형 2
.offset( coordinates )
선택한 요소를 특정 위치로 이동시킵니다.
예를 들어
$( 'h1' ).offset( { left: 100, top: 50 } );
은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킵니다.
예제 1
h1과 h2 요소의 좌표를 출력합니다.
<h1>Lorem</h2>
<h2>Ipsum</h2>
$( document ).ready( function() {
var a = $( 'h1' ).offset();
var b = $( 'h2' ).offset();
$( 'h2' ).after(
'<p>' + 'H1 - Left : ' + a.left + ', Top : ' + a.top + '</p>'
+ '<p>' + 'H2 - Left : ' + b.left + ', Top : ' + b.top + '</p>'
);
});
예제 2
h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킵니다.
<h1>Lorem</h2>
<h2>Ipsum</h2>
$( document ).ready( function() {
$( 'h1' ).offset( { left: 100, top: 50 } );
});