//엘리먼트.getBoundingClientRect()
예시
const formBottomPadding = document.querySelector('.chat-form').getBoundingClientRect().height;
chatWrap.style.paddingBottom = `${formBottomPadding}px`;getBoundingClientRect()메서드는 요소의 width, height 뿐만아니라 top, left의 대한 상대적인 위치 까지도 제공한다.
위 예시는 chat-form이라는 클래스를 가진 요소의 height값을 받아서 다른 요소의 패딩값으로 동적추가하는 과정이다.
'FRONTEND > JavaScript' 카테고리의 다른 글
| [JS] FormData() 생성자에 데이터 추가하는 법 (0) | 2022.08.31 |
|---|---|
| [JS] Map()의 메서드 종류 (0) | 2022.08.29 |
| [JS] arr.forEach() 와 arr.map()의 차이점! (0) | 2022.08.27 |
| [JS] 버블정렬 알고리즘 오름차순, 내림차순 (0) | 2022.08.25 |
| [JS] 문자열을 배열로 바꾸고 공백 제거하기 (+배열 공백제거) (0) | 2022.08.23 |