좌표를 가져오거나 특정 좌표로 이동시키는 방법 - .offset()

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