요소 크기 속성 및 메서드

요소 크기

이번 시간에는 요소의 크기를 알아주는 속성 및 메서드를 알아보겠습니다

---

9가지의 속성 및 메서드

01. 속성 : clientWidth() : 요소의 가로 값(마진/보더 미포함)
02. 속성 : clientHeight() : 요소의 높이 값(마진/보더 미포함)
03. 속성 : clientTop() : 요소의 Y축 값(부모 기준)
04. 속성 : clientLeft() : 요소의 X축 값(부모 기준)
05. 속성 : offsetWidth() : 요소의 가로 값(보더/패딩 포함)
06. 속성 : offsetHeight() : 요소의 높이 값(보더/패딩 포함)
07. 속성 : offsetTop() : 요소의 Y축 값(문서 기준)
08. 속성 : offsetLeft() : 요소의 X축 값(문서 기준)
09. 메서드 : getBoundingClientRect() : 크기 및 위치

width: 400px
margin: 200px
border: 1px
padding: 20px

여기에 결과 값이 표시됩니다.

박스의 가로 값(clientWidth)을 구합니다. 박스의 세로 값(clientHeight)을 구합니다. 박스의 X값(clientTop)을 구합니다. 박스의 Y값(clientLeft)을 구합니다. 박스의 가로 값(offsetWidth)을 구합니다. 박스의 세로 값(offsetHeight)을 구합니다. 박스의 X값(offsetTop)을 구합니다. 박스의 Y값(offsetLeft)을 구합니다. 크기 및 위치(getBoundingClientRect())을 구합니다.