정확한 센터링을 위해 HTML 요소의 너비와 높이를 어떻게 얻을 수 있습니까?

중앙 정렬을 위한 HTML 요소 너비 및 높이 계산

브라우저 디스플레이 내에서 HTML 요소를 중앙에 배치하려면 실제 너비와 높이를 결정하는 것이 중요합니다. 이를 달성하는 방법은 다음과 같습니다.

1. .offsetWidth 및 .offsetHeight 속성

다음을 사용하여 요소의 오프셋 너비와 높이를 검색할 수 있습니다.

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

2. .getBoundingClientRect() 함수

이 함수는 CSS 변환을 고려하여 요소의 크기와 위치에 대한 더 자세한 정보를 제공합니다.

console.log(document.getElementById('foo').getBoundingClientRect())

/* Output:
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}
*/

브라우저 지원:

• .offsetWidth 및 .offsetHeight: 모든 주요 브라우저(IE8)
• .getBoundingClientRect(): 모든 주요 브라우저(IE9)

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