본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT/Alphabet

element.getBoundingClientRect()

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)
    });

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
getBoundingClientRect()

참고 : 크기와 관련된 메서드(Dimensions Related method) - jQuery

  • width() 메서드는 선택한 요소의 가로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerWidth() 메서드는 선택한 요소의 가로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerWidth() 메서드는 선택한 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerWidth(true) 메서드는 선택한 요소의 가로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.
  • height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerHeight() 메서드는 선택한 요소의 세로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerHeight(true) 메서드는 선택한 요소의 세로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.

참고 : 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기

질문하기