>웹 프론트엔드 >JS 튜토리얼 >HTML 요소의 크기를 어떻게 정확하게 결정할 수 있습니까?

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

Linda Hamilton
Linda Hamilton원래의
2024-12-07 05:54:13179검색

How Can I Accurately Determine the Dimensions of an HTML Element?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.