IT 엘도라도 로고
IT 엘도라도
황금

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

2021-04-27 19:54

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

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

1. Window 인터페이스 Web API

1-1. Window.innerWidth / Window.innerHeight

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

1-2. Window.outerWidth / Window.outerHeight

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

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

  • 웹 페이지가 수평 방향으로 얼마나 스크롤되었는지를 픽셀로 반환하는 읽기 전용 프로퍼티이다.
  • 조금 더 정확하게는, 브라우저 창의 뷰포트의 왼쪽 모서리의 X 좌표를 의미한다.
  • 렌더링 하는 장치의 정밀도에 따라 정수를 반환할 수도, 실수를 반환할 수도 있다.
  • Window.pageXOffsetWindow.scrollX의 또 다른 이름(= 별칭)이다. 즉 둘의 값은 항상 같다.
  • 브라우저 호환성을 위해서는 Window.pageXOffset을 사용하는 것이 권장된다.

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

  • 웹 페이지가 수직 방향으로 얼마나 스크롤되었는지를 픽셀로 반환하는 읽기 전용 프로퍼티이다.
  • 조금 더 정확하게는, 브라우저 창의 뷰포트의 위쪽 모서리의 Y 좌표를 의미한다.
  • 렌더링 하는 장치의 정밀도에 따라 정수를 반환할 수도, 실수를 반환할 수도 있다.
  • Window.pageYOffsetWindow.scrollY의 또 다른 이름(= 별칭)이다. 즉 둘의 값은 항상 같다.
  • 브라우저 호환성을 위해서는 Window.pageYOffset을 사용하는 것이 권장된다.
 

2. Element 인터페이스 Web API

2-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.pageYOffsetElement.getBoundingClientRect()를 함께 사용하면 특정 엘리먼트의 절대 좌표를 얻어내는 것도 가능하다. 예를 들어, (domRect.top + window.pageYOffset)은 해당 엘리먼트의 절대적인 Y 좌표를 의미한다.

2-2. Element.style.width / Element.style.height

  • 해당 엘리먼트의 CSS width/height 프로퍼티에 설정된 값을 반환하는 프로퍼티이다.
  • 기본적으로는 Padding과 Border를 포함하지 않는다.
  • 그러나 CSS box-sizing 프로퍼티의 값이 border-box라면 Padding과 Border를 포함한다.

2-3. Element.clientWidth / Element.clientHeight

  • 해당 엘리먼트의 Padding을 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다. (스크롤바 제외)
  • 인라인 엘리먼트나 CSS가 적용되지 않은 엘리먼트는 0을 반환한다.

2-4. Element.scrollWidth / Element.scrollHeight

  • 해당 엘리먼트의 Padding과 넘친 스크롤 영역을 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.
  • Element.scrollLeft: 해당 엘리먼트가 수평 방향으로 얼마나 스크롤되었는지를 정수 픽셀로 반환하는 프로퍼티이다.
  • Element.scrollTop: 해당 엘리먼트가 수직 방향으로 얼마나 스크롤되었는지를 정수 픽셀로 반환하는 프로퍼티이다.

2-5. Element.offsetWidth / Element.offsetHeight

  • 해당 엘리먼트의 Padding과 Border를 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.
  • 해당 엘리먼트 혹은 부모 엘리먼트의 CSS display 프로퍼티 값이 none이라면 0을 반환한다.
말풍선
댓글 0
좋아요 2
    아직 작성된 댓글이 없어요.
사용자