JavaScript에서 회전된 요소의 정확한 크기를 얻는 방법은 무엇입니까?

회전 후 요소 크기 결정

문제: 변환: 회전(45deg);과 같은 변환을 적용한 후 정확한 너비 및 높이 속성을 얻습니다. 회전된 요소의 경우 어려울 수 있습니다. 기존 접근 방식에서는 실제 변환된 치수 대신 원래 치수를 보고할 수 있습니다.

해결책: 변환된 너비와 높이를 검색하려면 HTMLDOMElement의 getBoundingClientRect()를 활용하세요. 이 메소드는 적용된 변환에 관계없이 실제 높이와 너비를 포함하여 요소의 렌더링된 상자의 필수 속성이 포함된 객체를 반환합니다.

구현 예:

다음을 고려하세요. HTML 및 JavaScript:

<code class="html"><div id="my-div" style="width: 10px; height: 10px;">
</div></code>

<code class="javascript">const div = document.getElementById('my-div');
div.style.transform = 'rotate(45deg)';

const rect = div.getBoundingClientRect();

console.log(`Rotated dimensions: ${rect.width} x ${rect.height}`);</code>

이 코드 조각은 getBoundingClientRect() 메서드에 의해 보고된 대로 요소의 회전된 크기를 검색합니다. 이 경우 출력은 회전된 사각형의 실제 너비와 높이를 반영하는 17 x 17이 됩니다.

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