사이즈 관련 속성과 함수 및 위치 값 구하기

 

offsetWidth / offsetHeight:

 

요소의 전체 너비 및 높이를 반환합니다. border, padding, 스크롤바의 크기를 포함합니다.

 

const box = document.querySelector('#box');
console.log(`offsetWidth: ${box.offsetWidth}px`);
console.log(`offsetHeight: ${box.offsetHeight}px`);

 

 

clientWidth / clientHeight

 

요소의 내부 너비 및 높이를 반환합니다. padding은 포함하지만, border, margin, 스크롤바는 포함하지 않습니다.

 

const box = document.querySelector('#box');
console.log(`clientWidth: ${box.clientWidth}px`);
console.log(`clientHeight: ${box.clientHeight}px`);

 

 

scrollWidth / scrollHeight

 

스크롤된 요소의 전체 너비 및 높이를 반환합니다. 만약 스크롤이 필요하지 않은 경우, clientWidth/clientHeight와 동일한 값을 가집니다.

 

const box = document.querySelector('#box');
console.log(`scrollWidth: ${box.scrollWidth}px`);
console.log(`scrollHeight: ${box.scrollHeight}px`);

 

 

getBoundingClientRect

 

getBoundingClientRect() 메서드는 요소의 크기와 해당 요소가 뷰포트(Viewport)에 상대적으로 어디에 위치하는지에 대한 정보를 제공하는 메서드입니다. 스크롤 위치에 상관없이 요소의 위치를 정확하게 알고 싶을 때 유용합니다.

 

이 함수를 호출하면 반환되는 객체에는 다음과 같은 속성들이 포함되어 있습니다:

1. left (or x): 요소의 왼쪽 경계와 뷰포트의 왼쪽 사이의 거리입니다.
2. top (or y): 요소의 상단 경계와 뷰포트의 상단 사이의 거리입니다.
3. right: 요소의 오른쪽 경계와 뷰포트의 왼쪽 사이의 거리입니다.
4. bottom: 요소의 하단 경계와 뷰포트의 상단 사이의 거리입니다.
5. width: 요소의 너비입니다 (right - left).
6. height: 요소의 높이입니다 (bottom - top).

 

var element = document.querySelector('.example');
var sizePos = element.getBoundingClientRect();

console.log(sizePos.top);    // 상단 위치
console.log(sizePos.left);   // 왼쪽 위치
console.log(sizePos.width);  // 너비
console.log(sizePos.height); // 높이

 

 

문서의 전체 크기

 

document.body.scrollWidth: 스크롤바를 포함한 문서의 전체 너비

document.body.scrollHeight: 스크롤바를 포함한 문서의 전체 높이

 

 

 

Viewport Size

뷰포트는 사용자가 웹페이지의 내용을 볼 수 있는 영역을 나타냅니다.

 

스크롤바를 포함한 뷰포트 크기를 알아내려면 window.inner~를 사용합니다.

window.innerWidth는 스크롤바를 포함하는 뷰포트의 넓이

window.innerHeight는 스크롤바를 포함하는 뷰포트의 높이

 

 

스크롤바를 제외한 뷰포트 크기를 알아내려면 document.documentElement를 사용합니다.

document.documentElement.clientWidth는 스크롤바를 제외한 뷰포트의 너비

document.documentElement.clientHeight는 스크롤바를 제외한 뷰포트의 높이

 

모든 브라우저가 위의 속성을 동일하게 지원하는 것은 아니므로, 크로스 브라우저 호환성을 위해서는 종종 두 방법을 결합하여 사용합니다.

 

var width = window.innerWidth || document.documentElement.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight;

 

 

Screen(Monitor) Size

window.screen 객체를 통해 스크린사이즈를 알 수 있습니다.

 

스크린의 전체 너비: window.screen.width;

스크린의 전체 높이: window.screen.height;

 

사용 가능한 스크린 너비 (작업 표시줄, 도크 등을 제외한): window.screen.availWidth;

사용 가능한 스크린 높이 (작업 표시줄, 도크 등을 제외한): window.screen.availHeight;

 

 

문서에서 스크롤된 거리

• window.pageXOffset 혹은 window.scrollX: 수평 스크롤된 양
• window.pageYOffset 혹은 window.scrollY: 수직 스크롤된 양

 

 

요소 내에서 스크롤된 거리

• element.scrollLeft: 요소 내에서 수평 스크롤된 양
• element.scrollTop: 요소 내에서 수직 스크롤된 양

 

 

X, Y 위치 구하기

 

screenX, screenY

마우스 이벤트가 발생한 화면의 절대적인 x, y 좌표입니다.

 

 

clientX, clientY

뷰포트(Viewport) 내에서 마우스 이벤트가 발생한 위치의 x, y 좌표입니다.

스크롤을 고려하지 않은 좌표입니다.

 

 

pageX, pageY

문서의 전체 영역에서 마우스 이벤트가 발생한 위치의 x, y 좌표입니다.

스크롤을 고려한 좌표입니다.