[JavaScript] 창과 요소의 크기, 너비값, 높이값, 좌표 구하기

 

viewport의 크기 구하기

 

뷰포트는 화면상의 화상표시 영역을 뜻합니다. 사용자가 디스플레이를 볼 때 켜져 있는 브라우저에서 실시간으로 보고 있는 영역을 뜻합니다. 

 

뷰포트의 너비와 높이값은 각각 window객체의 window.innerWidth와 window.innerHeight로 받아올 수 있습니다.

단위는 px입니다. 

 

웹페이지에서 내용이 길어지면 스크롤이 생깁니다. 스크롤에는 상하스크롤과 좌우 스크롤이 있습니다. 보통 상하 스크롤은 뷰포트에서 가장 우측에, 좌우 스크롤은 뷰포트에서 가장 아래쪽에 생깁니다.

뷰포트에서 우측에 있는 상하 스크롤의 영역을 뺀 너비값은 document.documentElement.clientWidth,

뷰포트에서 밑에 있는 좌우 스크롤의 영역을 뺀 높이값은 document.documentElement.clientHeight로 구합니다.

마찬가지로 단위는 px입니다.

 

지금 바로 여기서 개발자도구의 콘솔 창을 키신 후 지금 소개한 코드들을 하나씩 실행해보시면 값이 출력될 것입니다.

 

window.innerWidth
window.innerHeight
document.documentElement.clientWidth
document.documentElement.clientHeight

 

 

 

element의 크기 구하기

 

어떤 엘리먼트 요소를 값으로 가지는 변수 x를 가정하겠습니다. element의 너비와 높이는 각각 x.style.width와 x.style.height으로 구합니다.

 

* 예시 코드

var video = document.querySelector('video');
console.log(video.style.width, video.style.height);

 

 

 

viewport를 기준으로 element의 크기, 좌표 구하기

 

viewport를 기준으로 element의 크기와 오프셋를 구할 때에는 getBoundingClientRect 메소드를 사용합니다. 메소드를 호출하면 너비, 높이, 오프셋을 반환합니다. 반환된 객체에서 너비와 높이는 width, height프로퍼티로, 좌표는 top, bottom, left, right로 얻을 수 있습니다.

단위는 px입니다.

 

* 예시 코드

var video = document.querySelector('video');
console.log(video.getBoundingClientRect().width);
console.log(video.getBoundingClientRect().height);
console.log(video.getBoundingClientRect().top);
console.log(video.getBoundingClientRect().bottom);
console.log(video.getBoundingClientRect().left);
console.log(video.getBoundingClientRect().right);

 

 

 

document를 기준으로 element 좌표 구하기

 

내용이 화면보다 길어 스크롤이 있는 경우, viewport에서 벗어나서 보이지 않는 document 영역의 길이는 window.pageXOffset과 window.pageYOffset으로 구할 수 있습니다.

이 값에 위에서 말한 x.getBoundingClientRect().top이나 x.getBoundingClientRect().left를 더하면 document를 기준으로 한 element의 좌표값을 구할 수 있습니다.

 

* 예시 코드

// document를 기준으로하는 엘리먼트의 top offset값
console.log(window.pageYOffset + target.getBoundingClientRect().top);
// document를 기준으로하는 엘리먼트의 left offset값
console.log(window.pageXOffset + target.getBoundingClientRect().left);