JavaScript : DOM 요소의 높이 / 너비를 알아보자(client / offset / scroll / getBoundingClientRect())

웹페이지, 또는 요소의 높이 / 너비 값에 대한 정보를 얻는 속성에 대해 소개해보고자 한다. 우선 client, offset, scroll에 대해 알아보자

client

• element.clientWidth | element.clientHeight | element.clientLeft | element.clientTop

해당 요소의 패딩을 포함한 크기를 나타낸다. clientWidth는 요소의 패딩을 포함한 너비, clientHeight는 요소의 패딩을 포함한 높이, clientLeft와 clientTop은 border기준 가장 바깥 끝부분으로부터 해당 요소가 얼마나 떨어져 있는지에 대한 정보를 제공한다. 

 

offset

• element.offsetWidth | element.offsetHeight | element.offsetLeft | element.offsetTop

요소가 화면에서 차지하는 영역전체의 크기를 나타낸다.  offsetWidth는 패딩, 보더, 스크롤바까지 포함한 너비, offsetHeight는 패딩, 보더, 스크롤바까지 포함한 높이, offsetLeft | offsetTop은 기준으로부터 해당 요소가 얼마나 떨어져있는지에 대한 정보를 제공한다. 여기서 기준이란 position:relative; 인 부모요소가 없을 경우에는, 본인의 원래 위치가 기준이 된다.   

 

scroll

• element.scrollWidth | element.scrollHeight | element.scrollLeft | element.scrollTop

scollWidth는 스크롤 바를 보지 않고도 모든 컨텐츠를 볼 수 있는 너비, scrollHeight는 스크롤바를 사용하지 않고도 모든 컨텐츠를 볼 수 있는 높이를 측정한다. 패딩은 포함되며, 보더는 포함되지 않는다. scrollLeft | scrollTop은 얼마나 스크롤을 했는지에 대한 좌표값을 측정한다.   

 

 

<<client, offset, scroll 예제>> 

위치변경과 크기변경 버튼을 누르던가 요소 안에서 스크롤을 할 때에 아래의 값들이 변경되는 모습을 볼 수 있다.

See the Pen DOM size by coding-ji (@coding-ji) on CodePen.

 

getBoundingClientRect()

HTMl요소의 크기와 현재 뷰포트에서의 요소의 상대적인 위치를 반환하는 메서드로, 반환 값은 패딩과 보더 너비를 포함해 전체 엘리먼트가 들어있는 사각형이다.

• top | y 
  화면 상단부터 반환 값(요소)의 처음 위치의 값
  
  
• left | x 
  화면 좌측부터 요소의 처음 위치의 값 
  
  
• bottom
  화면 상당부터 요소의 끝 위치의 값 
  
  
• right
  화면 좌측부터 대상 끝 위치의 값

 

<<getBoundingClientRect()예제>> 

스크롤을 하면 div가 하나씩 나타나는 것을 볼 수 있다. 

See the Pen getBoundingClientRect() by coding-ji (@coding-ji) on CodePen.