Frontend 높이를 구해 수정하기(script)

사내 웹 페이지 보수공사 중 div의 높이 값을 알아야 하는 경우가 생겼다.
css로 수정을 하면 편하긴 하지만 script 내에서 높이를 수정하는 방법이 필요했다.

let rightHeight = document.getElementById('left-card')

rightHeight.clientHeight // 높이!

document.getElementById('left-card').style.height = "800px"

각 줄에대한 설명을 간단하게 하자면...

1. getElementById의 괄호('')안에 해당하는 div 등 테그의 id를 넣어 'rightHeight'라는 변수에 저장한다.
2. 해당 id의 높이를 받아온다.
3. script 내에서 높이를 변경한다.

추가로 clientHeight, offsetHeight, scrollHeight의 차이를 알아보자.

• client- : 눈에 보이는 content + padding의 크기값
• offset- : 눈에 보이는 content + padding + border + scrollbar의 크기값
• scroll- : 눈에 보이지 않는 영역까지 포함한 전체 content + padding의 크기값