Jquery[제이쿼리] offset() 메서드 배우기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] offset 메서드를 배워보겠습니다.

준비화면 입니다위화면처럼 준비해주세요~

실행 화면입니당~~ 오늘은 간단하니까 금방끝날꺼에요~

===============================
$('div').click(function(){
   var divoffset = $(this).offset();
   alert("offset_top: "+divoffset.top+" offset_left: "+divoffset.left);
  }); 
===============================
div가 click되면 $(this).offset() <== 해당하는 div의 offset()의 리턴값을 
divoffset변수에 담아라입니다. 그다음 alert()메서드를 이용하여 값을 확인할수있도록
하였습니다.

※offset()이란 document객체의 좌측 상단 모서리에서부터 요소까지의 좌표를 가지고오거나
지정하는 메서드입니다.

아직 div를 클릭하기전입니다.

파랑색의 div를 클릭하였습니다.top:0 left:0 이란값이나오는것을 확인할수있네요.

이번에는 검정색 div를 클릭하였습니다. top:200 left:100 이란값을 확인할수있답니다.
top의 값이 200인 이유는 위에 파랑색 div의 height값이
100이여서 그만큼 공간을 차지하기때문입니다.
오늘은 제이쿼리[jquery] offset() 메서드를 배워봤습니다.
다음에 또만나요~