728x90
위치 및 크기를 표현하는 속성 및 메서드
요소의 위치 및 크기를 표현하는 속성 및 메서드를 알아봅시다!
| 속성 / 메서드 | 설명 | 비고 |
|---|---|---|
| element.clientWidth | 요소의 가로값 | 마진/보더 미포함 |
| element.clientHeight | 요소의 높이값 | 마진/보더 미포함 |
| element.clientTop | 요소의 Y축값 | 부모 기준 |
| element.clientLeft | 요소의 X축값 | 부모 기준 |
| element.offsetWidth | 요소의 가로값 | 보더/패딩 포함 |
| element.offsetHeight | 요소의 높이값 | 보더/패딩 포함 |
| element.offsetTop | 요소의 Y축값 | 문서 기준 |
| element.offsetLeft | 요소의 X축값 | 문서 기준 |
| element.getBoundingClientRect() | top, left, right, bottom, x, y, width, height | 객체로 해당 값을 모두 제공 |
See the Pen 요소 크기/위치를 표현하는 속성/메서드 by hjkang306 (@hjkang306) on CodePen.
728x90
'Javascript' 카테고리의 다른 글
| 문자열 메서드 : split() (3) | 2022.09.01 |
|---|---|
| 문자열 메서드 : 대문자 / 소문자 / 공백 (2) | 2022.09.01 |
| GSAP 알아보기 (4) | 2022.08.29 |
| 함수 유형 알아보기 (9) | 2022.08.22 |
| 문자열 메서드 : charAt() / charCodeAt() (9) | 2022.08.22 |
댓글