HTML 요소의 크기를 정확하게 결정하는 방법은 무엇입니까?

HTML 요소의 실제 크기 결정

브라우저 뷰포트 내에서 HTML 요소를 정렬할 때 크기를 정확하게 얻는 것이 중요합니다. 실제 너비와 높이. 이를 위해서는 다양한 브라우저에서 지원되는 특정 속성과 기능을 활용해야 합니다.

.offsetWidth 및 .offsetHeight

CSS 변환을 고려하지 않고 요소의 너비와 높이를 결정하려면 다음을 사용하세요. .offsetWidth 및 .offsetHeight 속성. 이러한 속성은 .style과 달리 요소에서 직접 액세스할 수 있습니다.

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

getBoundingClientRect()

.getBoundingClientRect() 함수는 CSS 변환이 적용된 후 요소의 크기와 위치. 다음 속성을 나타내는 부동 소수점 숫자를 반환합니다.

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

브라우저 지원

Property/Function	Browser Support
.offsetWidth/.offsetHeight	All major browsers
getBoundingClientRect()	All major browsers except Internet Explorer 8 and below

위 내용은 HTML 요소의 크기를 정확하게 결정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!