element.getBoundingClientRect()

getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다. top, left, right, bottom, x, y, width, height 속성 값을 가져옵니다

getBoundingClientRect()

getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.

특징	설명
유형(type)	element
버전(version)	ES1
결과값(return)	숫자(number)
사용성	★★★★☆

문법(Syntax)

element.getBoundingClientRect();

정의(Definition)

getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
getBoundingClientRect() 메서드는 요소의 top, left, right, bottom, x, y, width, height 속성 값을 가져옵니다.
width/height 값에는 padding과 border 값이 포함되어 있습니다.
top/left 값은 window.scrollX/window.scrollY 값과 동일합니다.

비교(compare)

getClientRect() 메서드는 요소의 크기 및 위치 정보와 길이 값(갯수)을 반환 할 수 있습니다.
getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보만 가져옵니다.

크기 및 위치와 관련된 메서드(Dimensions Related method)

clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다.
clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다.
clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.
offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다.
offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다.
getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.

예제1(Sample)

버튼을 클릭하면 박스의 위치와 크기를 구하는 예제입니다.

DOMRect
bottom, height, left, right, top, width, x, y,

여기에 결과값이 표시됩니다.

버튼을 클릭하면 박스의 위치 및 크기 정보를 가져옵니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="box">
        <span>
            DOMRect<br>
            bottom,
            height,
            left,
            right,
            top,
            width,
            x,
            y,
        </span>
    </div>
    <div class="desc">여기에 결과값이 표시됩니다.</div>
</div>

.jsample {
    text-align: center;
}
.jsample .box {
    margin: 20px auto;
    width: 400px;
    height: 200px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jsample .box::before {
    content: '';
    width: 358px;
    height: 158px;
    border: 1px dashed #4390E1;
    position: absolute;
    left: 20px; top: 20px;
}
.jsample .box::after {
    content: '';
    width: 440px;
    height: 240px;
    border: 1px dashed #4390E1;
    position: absolute;
    left: -21px; top: -21px;
}
.jsample .box span {
    color: #fff;
}
.jsample .desc {
    padding-top: 10px;
}

const desc = document.querySelector(".jsample .desc");
    const box = document.querySelector(".jsample .box");
    const rect = box.getBoundingClientRect();

    document.querySelector(".sampleBtn .btn1").addEventListener("click", (e) => {
        e.preventDefault();
        desc.innerHTML = '';
        for (let key in rect) {
            if(typeof rect[key] !== 'function') {
                let para = document.createElement('span');
                para.textContent  = `${ key } : ${ rect[key] } `;
                desc.appendChild(para);
            }
        }
        console.log(rect)
    });