자바스크립트 : 요소 크기 메서드

요소 크기 메서드

자바스크립트에는 요소의 크기 및 위치를 다양한 방법으로 표현하는 속성과 메서드가 있습니다.

---

크기 및 위치를 표현하는 속성과 메서드

속성 및 메서드	설명
element.clientWidth	요소의 가로값(margin, border 미포함)
element.clientHeight	요소의 세로값(margin, border 미포함)
element.clientTop	요소의 Y축 값(부모 기준)
element.clientLeft	요소의 X축 값(부모 기준)
element.offsetWidth	요소의 가로값(border, padding 포함)
element.offsetHeight	요소의 세로값(border, padding 포함)
element.offsetTop	요소의 Y축 값(문서 기준)
element.offsetLeft	요소의 X축 값(문서 기준)
element.getBoundingClientRect()	요소의 크기 및 위치값

크기 및 위치를 표현하는 속성과 메서드

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

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

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