공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

.offset() - 좌표찾기, 좌표셋팅

serpiko 2013. 10. 13. 23:05

.offset() : 조건에 일치하는 요소 집합 중 첫번째 요소의 문서 상의 상대적인 좌표값을 반환합니다.

.offset() 함수는 객체의 속성 중 top 과 left 값을 반환해 줍니다.

 

Note: jQuery는 숨은 요소 또는 body 요소의 borders, margin, padding 값에 대한 내용은 얻어낼 수 없습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
<!DOCTYPE html>
<html>
<head>
  <style>
p { margin-left:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p><p>2nd Paragraph</p>
<script>var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>

</body>
</html>

 

 

내가 실무에 응용

1
2
3
 
var pointer0_x = $("#bgContainer .pointContainer0").offset();

console.log(pointer0_x.left); //916

 

 

 

 

.offset( coordinates ) : 조건에 일치하는 요소들 모두를 문서상에 상대적 좌표값으로 세팅합니다.

  • .offset( coordinates ) - coordinates 정수 좌표값
  • .offset( function(index, coords) ) - function(index, coords) 좌표셋을 반환하는 함수.

    • .offset()를 사용하여 새로운 위치로 세팅할 수 있습니다. 문서 상의 상대적인 위치로 정해집니다. 만약 요소의 position 스타일이 현재 static이라면, relative로 재설정하여 사용해야 합니다.

     

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    		 
    <!DOCTYPE html>
<html>
<head>
  <style>p { margin-left:10px; } </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p><p>2nd Paragraph</p>
<script>$("p:last").offset({ top: 10, left: 30 });</script>

</body>
</html>

     

     

     

    API의 내용 출처 : http://api.jquery.com/offset/

    저작자표시 비영리 변경금지

    '■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

    css 백그라운드 바꾸기  (0) 2013.10.13
    .on() - 지금 또는 나중에 이벤트처리 묶음  (0) 2013.10.13
    .val() - 체크박스, 인풋박스 값가져오기  (0) 2013.10.13
    .animate - 딜레이와 움직임  (0) 2013.10.13
    position() - 상대좌표 구하기  (0) 2013.10.13
    댓글