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

HTML 요소의 크기 검색

HTML 요소의 크기를 정확하게 결정하는 것은 요소 위치 지정 및 콘텐츠 레이아웃과 같은 작업에 매우 중요합니다. 이 문서에서는 특정 요소의 실제 너비와 높이를 검색하는 다양한 방법을 살펴봅니다.

방법 1: Element.offsetWidth 및 Element.offsetHeight

이러한 속성은 요소의 너비와 높이를 제공합니다. 패딩과 테두리를 포함하지만 여백은 제외된 픽셀 너비와 높이입니다. 모든 주요 브라우저에서 지원됩니다.

var divElement = document.getElementById('myDiv');
var width = divElement.offsetWidth;
var height = divElement.offsetHeight;

방법 2: getBoundingClientRect()

이 메서드는 요소에 대한 다양한 크기와 위치 정보가 포함된 객체를 반환합니다. 특히 width 및 height 속성은 CSS 변환이 적용된 후 요소의 크기를 나타냅니다.

var divElement = document.getElementById('myDiv');
var boundingRect = divElement.getBoundingClientRect();
var width = boundingRect.width;
var height = boundingRect.height;

방법 3: offsetParent

이전 방법보다 정확도는 떨어지지만 메서드에서 offsetParent를 사용하여 해당 부모를 기준으로 요소의 위치를 ​​결정할 수 있습니다. 오프셋 너비와 높이를 재귀적으로 계산하면 요소의 실제 크기를 대략적으로 계산할 수 있습니다. 하지만 이 방법은 모든 브라우저에서 지원되는 것은 아닙니다.

function getOffsetDimensions(element) {
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  var parent = element.offsetParent;
  while (parent) {
    width += parent.offsetWidth;
    height += parent.offsetHeight;
    parent = parent.offsetParent;
  }
  return { width: width, height: height };
}

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