[JavaScript] DOM 엘리먼트의 크기 및 위치 관련 Web API

jQuery에서 벗어나 바닐라 JS를 공부하면서(참고) 정말 낯설었던 부분 중 하나를 꼽으라면 DOM 엘리먼트들을 다루는 Web API가 아니었나 싶다. 특히, DOM 엘리먼트의 크기나 위치와 관련된 정보를 참조하는 Web API들이 익숙하지 않아서 매번 MDN을 방문하지 않을 수 없었다. 그런데 계속 사용하다 보니 매번 찾았던 것만 또 찾는 것 같아서, 이번 기회에 자주 사용되는 DOM 엘리먼트의 크기 및 위치 관련 Web API들을 깔끔하게 정리해보기로 하였다. 잘 검색하는 것도 중요하지만 자주 사용되고 헷갈리는 부분은 한 번 직접 정리해서 나만의 것으로 만드는 것이 중요하다고 생각했기 때문이다.

 

우선, 본 포스팅의 내용을 사진 두 장으로 요약하자면 다음과 같다. 각 API에 대한 설명은 사진 하단에서 글로 보충한다.

 

 

1. Window 인터페이스 Web API

1) Window.innerWidth / Window.innerHeight

• 브라우저 창의 내부 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.
• 스크롤바가 존재한다면 그것까지 포함한다.
• 조금 더 정확하게는, 브라우저 창의 뷰포트의 너비/높이를 의미한다.

 

2) Window.outerWidth / Window.outerHeight

• 브라우저 창의 외부 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.

 

3) Window.scrollX (또는 Window.pageXOffset)

• 웹 페이지가 수평 방향으로 얼마나 스크롤되었는지를 픽셀로 반환하는 읽기 전용 프로퍼티이다.

• 조금 더 정확하게는, 브라우저 창의 뷰포트의 왼쪽 모서리의 X 좌표를 의미한다.

• 렌더링 하는 장치의 정밀도에 따라 정수를 반환할 수도, 실수를 반환할 수도 있다.

• Window.pageXOffset은 Window.scrollX의 또 다른 이름(= 별칭)이다. 즉 둘의 값은 항상 같다.

• 브라우저 호환성을 위해서는 Window.pageXOffset을 사용하는 것이 권장된다.

 

4) Window.scrollY (또는 Window.pageYOffset)

• 웹 페이지가 수직 방향으로 얼마나 스크롤되었는지를 픽셀로 반환하는 읽기 전용 프로퍼티이다.

• 조금 더 정확하게는, 브라우저 창의 뷰포트의 위쪽 모서리의 Y 좌표를 의미한다.

• 렌더링 하는 장치의 정밀도에 따라 정수를 반환할 수도, 실수를 반환할 수도 있다.

• Window.pageYOffset은 Window.scrollY의 또 다른 이름(= 별칭)이다. 즉 둘의 값은 항상 같다.

• 브라우저 호환성을 위해서는 Window.pageYOffset을 사용하는 것이 권장된다.

 

2. Element 인터페이스 Web API

1) Element.getBoundingClientRect()

• 해당 엘리먼트의 크기 정보와 뷰포트에 대한 상대적 위치 정보를 담고 있는 DOMRect 타입의 객체를 반환한다.

• domRect = element.getBoundingClientRect();

• domRect.width / domRect.height : 해당 엘리먼트의 너비/높이 (Padding과 Border 포함)

• domRect.x (또는 domRect.left) : 뷰포트 기준 왼쪽 모서리의 X 좌표 (브라우저 호환성을 위해 domRect.left 사용 권장)

• domRect.y (또는 domRect.top) : 뷰포트 기준 위쪽 모서리의 Y 좌표 (브라우저 호환성을 위해 domRect.top 사용 권장)

• domRect.right : 뷰포트 기준 오른쪽 모서리의 X 좌표

• domRect.bottom : 뷰포트 기준 아래쪽 모서리의 Y 좌표

 

* Window.pageXOffset 혹은 Window.pageYOffset과 Element.getBoundingClientRect()를 함께 사용하면 특정 엘리먼트의 절대 좌표를 얻어내는 것도 가능하다. 예를 들어, (domRect.top + window.pageYOffset)은 해당 엘리먼트의 절대적인 Y 좌표를 의미한다.

 

2) Element.style.width / Element.style.height

• 해당 엘리먼트의 CSS width/height 프로퍼티에 설정된 값을 반환하는 프로퍼티이다.

• 기본적으로는 Padding과 Border를 포함하지 않는다.

• 그러나 CSS box-sizing 프로퍼티의 값이 border-box라면 Padding과 Border를 포함한다.

 

3) Element.clientWidth / Element.clientHeight

• 해당 엘리먼트의 Padding을 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다. (스크롤바 제외)

• 인라인 엘리먼트나 CSS가 적용되지 않은 엘리먼트는 0을 반환한다.

 

4) Element.scrollWidth / Element.scrollHeight

• 해당 엘리먼트의 Padding과 넘친 스크롤 영역을 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.

• Element.scrollLeft : 해당 엘리먼트가 수평 방향으로 얼마나 스크롤되었는지를 정수 픽셀로 반환하는 프로퍼티이다.

• Element.scrollTop : 해당 엘리먼트가 수직 방향으로 얼마나 스크롤되었는지를 정수 픽셀로 반환하는 프로퍼티이다.

 

5) Element.offsetWidth / Element.offsetHeight

• 해당 엘리먼트의 Padding과 Border를 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.

• 해당 엘리먼트 혹은 부모 엘리먼트의 CSS display 프로퍼티 값이 none이라면 0을 반환한다.