HTMLElement.offsetHeight

일반적으로 offsetHeight는 테두리, 패딩 및 가로 스크롤 막대 (렌더링 된 경우)를 포함하여 요소 CSS 높이의 픽셀 단위로 측정됩니다.

::before 또는 ::after 와 같은 유사 요소 높이는 포함되지 않습니다. 문서 본문 객체의 경우 측정에는 요소의 CSS 높이 대신 총 선형 내용 높이가 포함됩니다. 다른 선형 컨텐츠 아래로 확장되는 부동 요소는 무시됩니다.

요소가 숨겨져 있으면 (예를 들어, 요소 또는 해당 조상 중 하나에서 "none"으로 style.display를 설정 하여) 0이 리턴됩니다.

이 속성은 값을 정수로 반올림합니다.

위의 예제 이미지 는 창에 맞는 스크롤 막대와 offsetHeight 높이를 보여줍니다 . 그러나 스크롤 할 수없는 요소는 보이는 내용보다 훨씬 큰 offsetHeight 값을 가질 수 있습니다. 이러한 요소는 일반적으로 스크롤 가능한 요소 내에 포함됩니다. 결과적으로, 스크롤 할 수없는 컨테이너 의 scrollTop 설정에 따라 이러한 비 스크롤 가능 요소는 완전히 또는 부분적으로 보이지 않을 수 있습니다 .

HTMLElement.offsetWidth

읽기 전용 속성을 반환 정수로 요소의 레이아웃 폭입니다.

일반적으로 offsetWidth 는 테두리, 패딩 및 세로 스크롤 막대 (렌더링 된 경우)를 포함하여 요소 CSS 너비의 픽셀 단위로 측정됩니다. ::before 또는 ::after 와 같은 의사 요소의 너비는 포함하지 않습니다.

요소가 숨겨져 있으면 (예를 들어, 요소 또는 해당 조상 중 하나에서 "none" 으로 style.display 를 설정 하여 ) 0 이 리턴됩니다.

출처 : https://blog.naver.com/valvestudio/20047687906

출처 : https://runebook.dev/ko/docs/dom/htmlelement/offsetheight

DOM - HTMLElement.offsetHeight - HTMLElement.offsetHeight 은 판독 전용 속성 복귀 수직 패딩 및 경계를 포함하

runebook.dev

https://runebook.dev/ko/docs/dom/htmlelement/offsetwidth

DOM - HTMLElement.offsetWidth - HTMLElement.offsetWidth 는 읽기 전용 속성을 반환 정수로 요소의 레이아웃 폭

runebook.dev

offsetLeft , offsetTop : 부모요소(or body 기준)를 기준한 좌표지점입니다.
offsetHeight, offsetWidth :해당 요소의 사이즈