요소의 크기와 위치를 구하는 방법

요소의 크기정보를 구하는 방법

안녕하세요 이번시간에는 요소의 크기정보를 구하는 방법을 알려드리겠습니다.

---

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

---

반응형

결과