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

티스토리 뷰

■ 프론트엔드 ■/jQuery

position() - 상대좌표 구하기

serpiko 2013. 10. 13. 23:00
 .position() 

 

조건에 일치하는 요소 집합 중 첫번째 요소의 문서 상의 부모 요소를 기준으로 한 상대적인 좌표값을 반환합니다.

 

.offset() : 요소의 문서 상의 상대적인 현재 위치를 알 수 있다. 드래드앤드롭 구현을 위해 사용(새로운 요소를 기존의 요소에 위치)

.position() : 부모요소를 기준으로 한 상대적인 현재 위치를 알 수 있다. 기존 요소의 근처에서 새로운 요소의 좌표를 설정.

객체의 속성들 중 top과 left값에 대한 내용을 반환해 준다.

 

실무)

1
2
3
 
var x = $("#menu").find(".ov").position().left;

var y = $("#menu").find(".ov").position().top;

 

예제) 두번째 문단(p태그)의 좌표에 접근

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!DOCTYPE html>
<html>
<head>
  <style>

  div { padding: 15px;}
  p { margin-left:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div>
  <p>Hello</p>
</div>
<p></p>

<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>

</body>
</html>

 

결과)

 

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

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

.val() - 체크박스, 인풋박스 값가져오기  (0) 2013.10.13
.animate - 딜레이와 움직임  (0) 2013.10.13
.hide() - 요소감추기  (0) 2013.10.13
.show() - 요소보이기  (0) 2013.10.13
xml - 파싱2  (0) 2013.10.13
댓글