getBoundingClientRect()

CashCash·2021년 1월 1일
0

javascript

목록 보기
9/12

1. 사용법

  • getBoundingClientRect() 메서드는 요소의 크기와 viewport에 대한 요소의 위치에 대한 정보를 제공하는 DOMRect개체를 반환한다.
	domRect = element.getBoundingClientRect();

2. 예시

let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
for (var key in rect) {
  if(typeof rect[key] !== 'function') {
    let para = document.createElement('p');
    para.textContent  = `${ key } : ${ rect[key] }`;
    document.body.appendChild(para);
  }
}

//x : 93.11666870117188
//y : 50
//width : 440
//height : 240
//top : 50
//right : 533.1166687011719
//bottom : 290
//left : 93.11666870117188
profile
studying frontend

0개의 댓글