HTML 요소의 크기를 어떻게 정확하게 결정할 수 있습니까?

HTML 요소의 실제 크기를 계산하는 방법

HTML 요소를 적절하게 정렬하려면 HTML 요소의 정확한 너비와 높이를 결정하는 것이 중요합니다. 이 문서에서는 실제 치수를 검색하기 위한 다양한 기술을 살펴보고 다양한 브라우저 간의 호환성 세부 정보를 제공합니다.

.offsetWidth 및 .offsetHeight

개념: 이러한 속성은 패딩을 포함한 요소 border.

예:

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

브라우저 지원: 모든 주요 브라우저

.getBoundingClientRect()

콘셉트: 이 메소드는 CSS 변환을 적용한 후 너비와 높이를 포함하여 다양한 치수와 좌표가 포함된 DOMRect 객체를 반환합니다.

예:

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,
}

브라우저 지원:

• 데스크톱 브라우저: Chrome, Edge, Firefox, Safari
• 모바일 브라우저: Android용 Chrome, iOS Safari

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