DOM 조작할 때 사용되는 몇 가지 사이즈 속성들

뭔 놈의 사이즈들이 이렇게 많은 것이야...

 

 

JavaScript에서 DOM을 조작할 때 사용되는 몇 가지 사이즈 속성들을 정리해보자.

 

 

1. offsetWidth와 offsetHeight :

• `element.offsetWidth` : 요소의 너비(가로 크기) 반환.
• `element.offsetHeight` : 요소의 높이(세로 크기) 반환.
• 이 속성은 테두리, 안쪽 여백, 스크롤바 등을 포함한 전체 크기를 반환한다.

var width = element.offsetWidth;
var height = element.offsetHeight;

• 활용 예시 : 요소가 차지하는 전체 공간을 알고 싶을 때, 특히 테두리와 여백을 고려해야 하는 경우.

var width = document.getElementById("home").offsetWidth;
var height = document.getElementById("home").offsetHeight;

 

 

2. clientWidth와 clientHeight :

• `element.clientWidth` : 내부 콘텐츠의 너비 반환.
• `element.clientHeight` : 내부 콘텐츠의 높이 반환.
• 이 속성은 테두리와 스크롤바를 제외한 콘텐츠의 크기를 반환한다.

var contentWidth = element.clientWidth;
var contentHeight = element.clientHeight;

• 활용 예시 : 요소의 내용이 차지하는 공간을 알고 싶을 때, 특히 내부 콘텐츠의 크기를 고려해야 하는 경우.

var contentWidth = document.getElementById("home").clientWidth;
var contentHeight = document.getElementById("home").clientHeight;

 

---

따라서, 예를 들어 "home"섹션의 전체 크기를 알고 싶다면 offset사이즈 속성을 사용하면 되고,

내부 콘텐츠의 크기를 알고 싶다면 client사이즈 속성을 활용하면 된다.

---

 

3. getBoundingClientRect :

• `element.getBoundingClientRect()` : 요소의 크기와 화면상에서의 위치 정보를 반환.
• 이 메서드는 요소의 상대적인 위치와 크기를 반환한다.

var rect = element.getBoundingClientRect();
var elementTop = rect.top; // 요소의 상단 위치
var elementLeft = rect.left; // 요소의 왼쪽 위치

 

4.scrollWidth와 scrollHeight : 

• `element.scrollWidth` : 요소의 내용이 스크롤바를 사용하여 스크롤할 때 필요한 전체 너비.
• `element.scrollHeight` : 요소의 내용이 스크롤바를 사용하여 스크롤할 때 필요한 전체 높이.
• 이 속성들은 숨겨진 콘텐츠까지 고려한 전체 크기를 반환한다.