요소 크기

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

속성 및 메서드	설명
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)을 구합니다.