[JS] getBoundingClientRect() - Viewport를 기준으로 하는 위치 값 가져오기

getBoundingClientRect()

 

element.getBoundingClientRect()

 

 

element의 크기(width, height)와

뷰포트(viewport)를 기준으로 한 위치(left, top, right, bottom, x, y),

이렇게 총 8가지 속성이 있는 DOMRect 객체를 리턴한다.

 

 

 

 

width와 height은 contents뿐 아니라 padding과 border까지 포함한다.

width와 height를 제외한 모든 속성은 뷰포트(viewport)의 top-left 를 기준으로 하며,

뷰포트(viewport)를 기준으로 하는 상대적인 값이기 때문에 scroll로 인해 위치가 변경 될 때마다 값이 변경된다.

 

 

<div class="target">
    hello
</div>

 

body {
  padding: 0;
  margin: 0;
}

.target {
    width: 100px;
    height: 100px;
    border: 50px solid darkolivegreen;
    background-color: lightsalmon;
    padding: 50px;
    margin: 50px;
}

 

const target = document.querySelector('.target');
const targetRect = target.getBoundingClientRect();

console.log(targetRect);

/* DOMRect {
        x: 50, 
        y: 50, 
        width: 300, 
        height: 300, 
        top: 50, 
        bottom: 350,
        left: 50
        right: 350 }  */