[Javascript] 화면, 현재위치, HTML요소(태그) 좌표구하기

 

자바스크립트를 사용하다 보면 좌표값이 필요한 경우가 있는데, 일반적으로 화면의 좌표값을 주로 사용하지만 간혹 html 태그별 좌표가 필요한 경우도 있고, 같은 화면의 좌표라 하더라도 절대값에 의한 좌표가 필요한 경우도 있을 것이고 반대로 상대적인 좌표가 필요한 경우도 있을 수가 있다. 물론 절대값, 상대값에 대한 구분은 html 태그들의 좌표를 구할때도 필요한건 당연하다.

 

그래서 오늘은 JavaScript를 이용하여 웹페이지 상의 좌표구하는 방법에 대하여 포스팅하고자 한다.

 

 

 

 

 

현재 브라우저에서 얼마나 스크롤해서 이동했는지 확인방법

var winX = window.pageXOffset;
var winY = window.pageYOffset;

순수 자바스크립트로 작성했기 때문에 제이쿼리와 같은 별도의 라이브러리 없이 바로 사용이 가능하다.
초기 값은 당연히 x, y모두 0, 0에서 시작하며 스크롤로 이동한 만큼 값이 변한다.

 

 

 

 

 

ViewPort(현재 보고있는 화면)기준으로 특정요소의 좌표 구하기

var target = document.getElementById("element");

var targetTop = target.getBoundingClientRect().top;
var targetBottom = target.getBoundingClientRect().bottom;
var targetLeft = target.getBoundingClientRect().left;
var targetRight = target.getBoundingClientRect().right;

현재 보고있는 화면의 좌측최상단이 0, 0이라고 가정하고 선택한 요소의 위치값을 구하는데
주의할점은 getBoundingClientRect()함수는 IE에서는 미지원이라는 이야기를 들은것 같은데 확인은 해보지 못했다.

 

 

 

 

 

특정 HTML 태그 요소의 절대좌표 구하기

var target = document.getElementById("top");

var targetTop = target.getBoundingClientRect().top;

var abTop = window.pageYOffset + target.getBoundingClientRect().top;

이 포스팅의 하이라이트인 특정요소의 절대위치를 구하는 방법이다.
아니 offset이라는 편한 함수가 있는데 왜 이렇게 구하나요? 라고 물어본다면 여기에 대해서는 할말이 조금 있다.

offset의 경우 정확히는 절대좌표가 아니라 가장 가까운 relative한 부모 요소를 기준으로 하는 상대경로를 구하는 것인데 부모요소중에

relative가 없다면 최상위 경로까지 올라가 결국은 절대경로에 대한 값을 구하는 것이 가능하지만, 만약 중간에 단 한개라도

relative가 있다면 잘못된 값을 전달하게 되는 경우가 발생하게 되는 것이다.

따라서 (스크롤로 이동한 거리 + 현재화면을 기준으로한 상대경로 값)을 합한 값으로 절대경로를 구하는 방법을 선택한 것이다.