DOM 엘리먼트의 다양한 길이 값을 가져오는 방법

element.offsetParent 

 

엘리먼트의 위치에 영향을 주는 가장 가까운 조상을 가져온다.

조상 중 position 속성에 absolute, relative, fixed, sticky가 있는 것을 말한다.

없다면 body, table, th, td 엘리먼트 중 가까운 조상을 가져온다.

 

element.offsetLeft

 

offsetParent를 기준으로 왼쪽에서 오른쪽으로 얼만큼 떨어져 있는지를 알려준다.

 

element.offsetTop

 

offsetParent를 기준으로 위쪽에서 아래쪽으로 얼만큼 떨어져 있는지를 알려준다.

 

element.offsetWidth

 

border를 포함한 엘리먼트의 가로 길이

 

element.offsetHeight

 

border를 포함한 엘리먼트의 세로 길이

 

element.clientTop

 

위쪽 테두리의 길이

 

element.clientLeft

 

왼쪽 테두리의 길이

 

element.clientHeight

 

border를 제외하고 padding을 포함한 엘리먼트 높이의 길이

 

element.clientWidth

 

border를 제외하고 padding을 포함한 엘리먼트 가로의 길이

overflow로 스크롤바가 안쪽에 생기면 스크롤바의 길이는 포함되지 않으니 주의해야 한다.

 

element.scrollHeight

 

스크롤바가 없을 때는 clientHeight와 동일하지만 스크롤바가 생겨 내용물이 영역을 벗어나면 벗어난 부분까지 포함해서 계산한다.

 

element.scrollWidth

 

위와 마찬가지다.

 

element.scrollTop

 

스크롤바의 이동으로 위쪽이 얼마만큼 가려졌는지를 알려준다.

다른 것들과 달리 값을 직접 넣어 수정이 가능하기 때문에 이 속성을 이용해서 스크롤바를 이동시킬 수 있다.

 

element.scrollLeft

 

위와 마찬가지다.

 

참고 :

https://ko.javascript.info/size-and-scroll