jquery 를 이용하여 태그 좌표 구하기 (절대위치 구하기 / 태그 위치 구하기)

 

 

 

 

 

jquery 를 이용하여 태그의 좌표(절대위치)를 구해보자.

 

 

 

위와 같은 그림에서 태그가 있는 위치의 값이 필요할 경우가 생긴다.

 

예를 들면 클릭한 곳에서 tool tip 을 보여준다거나 특정 위치에서 어떤 이벤트나 작업을 해야할 경우가 종종 있다.

 

그래서 이번에는 웹페이지에서 특정 태그의 좌표를 구해본다.

 

 

좌표를 구하는 방법을 요약하자면 특정 태그의 절대위치를 가져온다.

 

끝.

 

아주 간단하다.

 

절대위치를 가져오는 방법은 아래의 글에서 설명하고 있다.

2016/05/11 - [language/jquery] - jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동하기

 

 

위 링크의 내용 중 일부를 발췌했다.

 

태그의 위치를 가져오는 함수는 offset, position 이 있다.

두 함수의 차이점에 대해 간단히 설명하겠다.

 

offset : document 안에서의 위치 값을 반환한다. 쉽게 말해 페이지 전체를 기준으로 위치값을 반환한다. 절대좌표를 반환한다고 표현하기도 한다.

 

position : DOM 안에서의 위치 값을 반환한다. 부모 태그가 감싸져 있다면 부모태그를 기준으로 위치값을 반환한다. 상대좌표를 반환한다고 표현하기도 한다.

 

 

 

offset 함수를 이용하면 끝이다.

 

offset 함수를 어떻게 이용하는가에 대해서는 그림과 함께 설명하도록 하겠다.

 

 

 

가장 기본적인 좌측 상단의 값을 가져와 보자.

 

 

 

먼저 해야할 일은 DIV 태그의 좌측 위치를 가져오는 것이다.

 

 

 

그 다음에는 상단 위치값을 가져온다.

 

소스

var divEl = $("DIV");
                            
var divX = divEl.offset().left;
var divY = divEl.offset().top;

1# : div 태그를 사용하기 편하도록 변수화 시킨다.

3# : offset 함수를 이용하여 left 값을 가져온다.

4# : offset 함수를 이용하여 top 값을 가져온다.

 

 

 

그러면 그림과 같은 위치의 절대위치를 가져올 수 있다.

 

 

 

다음으로는 태그의 정 중앙의 절대위치를 가져오는 방법에 대해서 알아본다.

 

 

 

방법은 간단하다.

태그의 너비(width)/2 의 값을 좌측위치 값과 더한다.

 

 

 

그리고 태그의 높이(height)/2 의 값을 상단 위치값과 더한다.

 

소스

var divEl = $("DIV");
                            
var divX = divEl.offset().left;
var divY = divEl.offset().top;
 
var divHalfWidth = divEl.width() / 2;
var divHalfHeight = divEl.height() / 2;
 
var divCenterX = divX + divHalfWidth;
var divCenterY = divY + divHalfHeight;

6# : 태그의 width 값을 구해서 2로 나눈다.

7# : 태그의 height 값을 구해서 2로 나눈다.

9# : 태그의 좌측 위치값과 width를 2로 나눈 값을 더한다.

10# : 태그의 상단 위치값과 height를 2로 나눈 값을 더한다.

 

 

 

 

위 그림과 같은 원리로 가운데 위치의 절대위치를 알 수 있다.

 

 

 

태그에 margin, padding 등이 설정되어 있다면 위와 같은 방법으로 추가로 계산하면 된다.