JavaScript에서 변환된 HTML 요소의 정확한 너비와 높이를 얻는 방법은 무엇입니까?

변환 후 너비 및 높이 결정

HTML 요소에 회전과 같은 변환을 적용할 때 JavaScript의 기본 메소드는 변환된 내용을 정확하게 검색하지 못할 수 있습니다. 너비와 높이.

문제:

회전 변환(예: 회전(45deg))을 적용한 후 요소의 크기가 다른 것으로 나타날 수 있습니다(예: 정사각형은 직사각형으로 나타납니다). 그러나 너비 및 높이와 같은 JavaScript 속성은 여전히 ​​변환되지 않은 원래 값을 반환합니다.

해결책:

변환 후 실제 치수를 검색하려면 getBoundingClientRect() 메서드를 사용하세요. HTMLDOMElement.

<code class="javascript">const element = document.getElementById('element');

// Apply the transformation
element.style.transform = 'rotate(45deg)';

// Get the transformed dimensions
const dimensions = element.getBoundingClientRect();

console.log('Transformed Width:', dimensions.width);
console.log('Transformed Height:', dimensions.height);</code>

이 메소드는 변환 행렬을 고려한 후 요소의 크기를 포함하는 객체를 반환합니다.

예:

A 45도 회전하면 11x11 정사각형이 Chrome에서 17x17 직사각형이 됩니다. getBoundingClientRect() 메서드는 17x17 크기를 정확하게 보고하지만 원래 너비 및 높이 속성은 여전히 ​​11x11을 반환합니다.

위 내용은 JavaScript에서 변환된 HTML 요소의 정확한 너비와 높이를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!