-
jQuery - .offset()jQuery 2020. 6. 23. 17:14
.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>
'jQuery' 카테고리의 다른 글
jQuery - .prop() (0) 2020.06.23 jQuery - .parent() (0) 2020.06.23 jQuery - .not() (0) 2020.06.23 jQuery - .load() (0) 2020.06.23 jQuery - jQuery.trim() (0) 2020.06.23