[JavaScript] 요소의 좌표 구하기 | offset, client, page, screen

프로젝트를 진행하다 보니 element의 좌표를 구해야 하는 경우가 있다.

경우에 따라 모니터기준, 페이지 기준, 보이는 화면 기준 등이 있다.

 

내가 이해한대로 대충 그림을 그린 것인데 그림에는 Y좌표 기준으로 써놨지만

왼쪽 세로선을 기준으로 X좌표도 구할 수 있다.

 

이 중에서 나는 offset을 제일 많이 필요로 하는데 밑그림처럼 정리해보았다.

나는 네비게이션에 offset자료가 필요해 처음에 오른쪽을 기준으로 offsetRight라는 코드를 입력했는데 알고 보니 offsetRight과 offsetBottom은 없다고 한다.

 

오른쪽을 구하고 싶으면 offsetLeft + offsetWidth 를 더해 사용하면 되고

아래를 구하고 싶다면 offsetTop + offsetHeight를 더해 사용하면 된다.