JavaScript에서 회전된 요소의 실제 너비와 높이를 검색하는 방법은 무엇입니까?

회전 변환 후 너비/높이 검색

CSS를 사용하여 요소에 회전 변환을 적용하면 요소의 시각적 모양이 변경될 수 있습니다. 하지만 너비와 높이에 대한 JavaScript 속성은 이 변경 사항을 반영하지 않을 수 있습니다.

문제:

45도 회전 변환을 적용한 후 11x11 정사각형이 다음과 같이 나타납니다. 브라우저에서는 17x17입니다. 그러나 JavaScript를 사용하여 너비 및 높이 속성을 검색하려고 하면 여전히 원래 값(10x10)을 얻습니다.

해결책:

너비를 정확하게 검색하려면 회전 변환을 적용한 후 HTMLDOMElement의 getBoundingClientRect() 메서드를 사용할 수 있습니다. 이 메소드는 변환 행렬을 고려하여 올바른 높이와 너비를 가진 객체를 반환합니다.

<code class="javascript">const element = document.querySelector('.rotated-element');

const rect = element.getBoundingClientRect();

const width = rect.width;
const height = rect.height;</code>

getBoundingClientRect()가 객체의 실제 시각적 크기를 고려하기 때문에 이 접근 방식은 원하는 결과(17x17)를 제공합니다. 요소의 속성에 저장된 원래 값뿐만 아니라 회전된 요소도 마찬가지입니다.

위 내용은 JavaScript에서 회전된 요소의 실제 너비와 높이를 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!