요소 크기 메서드
요소 크기 메서드에 대해 알아보는 시간을 가지도록 하겠습니다.
01. 요소 크기 메서드 종류
요소 크기 메서드의 종류를 알아보겠습니다.
| 속성 및 메서드 | 설명 |
|---|---|
| clientWidth | 요소의 가로(패딩 포함, 보더/마진 미포함) |
| clientHeight | 요소의 높이(패딩 포함, 보더/마진 미포함) |
| clientTop | 요소의 Y축값(부모기준) |
| clientLeft | 요소의 X축값(부모기준) |
| offsetWidth | 요소의 가로(패딩/보더 포함, 마진 미포함) |
| offsetHeight | 요소의 높이(패딩/보더 포함, 마진 미포함) |
| offsetTop | 요소의 X축값(문서기준) |
| offsetTop | 요소의 Y축값(문서기준) |
| getBoundingClientRect() | 크기 및 위치 |
02.예제
'Javascript' 카테고리의 다른 글
| 펼침 연산자 / 객체 구조, 비구조 할당 (0) | 2022.10.10 |
|---|---|
| mouseenter / movesover의 차이점 (5) | 2022.09.05 |
| GSAP (7) | 2022.08.29 |
| 함수 유형 02 (5) | 2022.08.23 |
| charAt() (4) | 2022.08.23 |
댓글