MarkUp
요소의 크기와 위치를 구하는 방법
개발자로 거듭나기
2022. 9. 1. 14:13
반응형
요소의 크기정보를 구하는 방법
안녕하세요 이번시간에는 요소의 크기정보를 구하는 방법을 알려드리겠습니다.
01. 요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로 값(마진/보더 포함하지 않음)
요소의 가로 값을 구합니다.
02. 요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 세로 값(마진/보더 포함하지 않음)
요소의 세로 값을 구합니다.
03. 요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축 값(부모기준)
요소의 Y축 값을 구합니다.
04. 요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축 값(부모기준)
요소의 X축 값을 구합니다.
05. 요소 속성 : 크기 및 위치 : element.offsetWidth : 요소의 가로 값(보더 / 패딩 포함)
요소의 가로 값을 구합니다.
06. 요소 속성 : 크기 및 위치 : element.offsetHeight : 요소의 세로 값(보더 / 패딩 포함)
요소의 세로 값을 구합니다.
07. 요소 속성 : 크기 및 위치 : element.offsetTop : 요소의 Y축 값(문서 기준)
요소의 Y축 값을 구합니다.
08. 요소 속성 : 크기 및 위치 : element.offsetLeft : 요소의 X축 값(문서 기준)
요소의 X축 값을 구합니다.
09. 요소 메서드 : 크기 및 위치 : element.getBoundingClientRect() : 요소의 크기 및 위치정보 : top, left, right, bottom, x, y, width, height
요소의 위치 정보를 구합니다.
요약
| 번호 | 속성/메서드 이름 | 설명 |
|---|---|---|
| 01 | element.clientWidth | 요소의 가로값(마진/보더 미포함) |
| 02 | element.clientHeight | 요소의 높이값(마진/보더 미포함) |
| 03 | element.clientTop | 요소의 Y축값(부모기준) |
| 04 | element.clientLeft | 요소의 X축값(부모기준) |
| 05 | element.offsetWidth | 요소의 가로값(보더/패딩 포함) |
| 06 | element.offsetHeight | 요소의 가로값(보더/패딩 포함) |
| 07 | element.offsetTop | 요소의 Y축값(문서 기준) |
| 08 | element.offsetLeft | 요소의 X축값(문서 기준) |
| 09 | element.getBoundingClientRect() | op, left, right, bottom, x, y, width, height |
반응형
결과
반응형