[JavaScript]Element의 위치 및 크기 알아내기

var t = document.getElementById('target');

위 코드에서 getBoundingClientRect()메소드는

콘솔에 이런 값을 리턴하는데

이는 위치와 크기에 관한 리턴값이다.

위의 사각형이 target엘리먼트의 형태인데

top과 bottom left right는 각각 BODY태그에서 얼마나 떨어져 있는지

width와 height는 엘리먼트의 텍스트 노드 + 패딩값 + 보더값을 나타낸다.

만약 엘리먼트가 중첩되어 있다면 어떻게 될까?

위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBoundingClientRect를 호출해보자.

뭐 결과는 같다.

예외가 있다면 table일때는 body태그가 아닌 table안에서 비교한다.

그리고 뭐랑 비교하는지 알고 싶다면

console.log(t.offsetParent);

offsetParent를 로그로 찍어보자!

만약 보더값을 제외한 값을 알고 싶다면 ClientWidth , ClientHeight 메소드를 이용하자.

자! 그렇다면 만약 스크롤을 이용하여 위치가 바뀌게 된다면?!

<script>

var t = document.getElementById('target');

setInterval(function(){

    console.log('getBoundingClientRect : ', t.getBoundingClientRect().top, 'pageYOffset:', window.pageYOffset);

}, 1000)

</script>

다음 코드는  getBoundClient의 top값과 window.pageYOffset를 로그에 리턴한다.

이때 setInterval이라는 API는 함수를 지니며 정해진 시간마다 반복하여 실행된다.

결과 값은 getBoundClient.top는 현재 문서의 위치에서 엘리먼트 까지의 거리를 나타내고 pageYOffset은 스크롤한 거리를 나타낸다.

getBoundClient.top이 203이면  pageYOffset 은 0

getBoundClient.top이 163이면  pageYOffset 은 40 와 같은식으로..

이와 같이 현재 보이는 문서의 크기를 viewPort라고 하고 getBoundClient는 정확히는 고정적인 바디를 말하는 것이 아닌 이 viewport

를 기준으로 거리를 리턴한다.

만약 고정적인 바디부터 엘리멘트의 거리를 알고 싶다면 getBoundClient.top + pageYOffset 하면 된다.

스크롤 이야기가 나왔으니 스크롤을 조정할 수 있는 API를 알아보자

<script>

    document.getElementById('scrollBtn').addEventListener('click', function(){

        window.scrollTo(0, 1000);

})

</script>

scrollBtn이라는 엘리먼트에 window.scrollTo라는 API를 이용했다. 첫번째 파라미터는 x축 두번째 파라미터는 y축이다.

마지막으로 스크린의 크기를 알아보자

<script>

console.log('window.innerWidth:', window.innerWidth, 'window.innerHeight:', window.innerHeight);

console.log('screen.width:', screen.width, 'screen.height:', screen.height);

</script>

window.innerWidth , innerHeight 는 뷰포트값을

screen.width , screen.height 는 사용자의 해상도를 나타낸다.