jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드
.offset()
.offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다.
문법 1
.offset()
선택한 요소의 좌표를 가져옵니다. 예를 들어
var jb = $( 'h1' ).offset();
는 h1 요소의 좌표를 변수 jb에 저장합니다.
문법 2
.offset( coordinates )
선택한 요소를 특정 위치로 이동시킵니다. 예를 들어
$( 'h1' ).offset( { left: 100, top: 50 } );
은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킵니다.
예제 1
h1과 h2 요소의 좌표를 출력합니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { var jb1 = $( 'h1' ).offset(); var jb2 = $( 'h2' ).offset(); $( 'h2' ).after( '<p>' + 'H1 - Left : ' + jb1.left + ', Top : ' + jb1.top + '</p>' + '<p>' + 'H2 - Left : ' + jb2.left + ', Top : ' + jb2.top + '</p>' ); } ); </script> </head> <body> <h1>Lorem</h2> <h2>Ipsum</h2> </body> </html>
예제 2
h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킵니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'h1' ).offset( { left: 100, top: 50 } ); } ); </script> </head> <body> <h1>Lorem</h2> <h2>Ipsum</h2> </body> </html>