HTML 요소의 실제 너비와 높이를 검색하는 방법

질문 : HTML 요소의 실제 너비와 높이를 어떻게 검색합니까?

---

브라우저의 디스플레이 (뷰포트) 중앙에 배치하려는 <div> 가 있다고 가정합니다. <div> 요소의 너비와 높이를 계산해야합니다.

무엇을 사용해야합니까? 브라우저 호환성에 대한 정보를 포함하십시오.

답변

---

.offsetWidth 및 .offsetHeight 속성을 사용해야합니다. .style 아니라 요소에 속합니다.

var width = document.getElementById('foo').offsetWidth;

.getBoundingClientRect() 함수는 CSS 변환을 수행 한 후 요소의 크기와 위치를 부동 소수점 숫자로 반환합니다.

> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

출처 : https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height