JavaScript에서 변환된 요소의 정확한 너비와 높이를 얻는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-10-28 03:27:30

원래의

851명이 탐색했습니다.

How to Get the Accurate Width and Height of a Transformed Element in JavaScript?

변환 후 너비 및 높이 검색

요소에 회전(45deg)과 같은 변환을 적용할 때 해당 요소의 시각적 크기 변화. 그러나 JavaScript의 너비 및 높이 속성은 여전히 변환되지 않은 원래 크기를 반영합니다.

해결책: getBoundingClientRect() 사용

변환 후 업데이트된 크기를 얻으려면 HTMLDOMElement의 getBoundingClientRect() 메서드입니다. 이 메소드는 변환된 높이와 너비를 포함하는 객체를 반환합니다.

예:

<code class="javascript">// Get the element
const element = document.querySelector('.transformed');

// Calculate the rotated dimensions
const rect = element.getBoundingClientRect();

// Access the rotated width and height
const rotatedWidth = rect.width;
const rotatedHeight = rect.height;</code>

로그인 후 복사

데모:

방문 실제 예는 다음 jsFiddle을 참조하세요. https://jsfiddle.net/your_url_here

참고: 이 방법을 사용하면 테두리나 패딩을 포함한 전체 요소의 크기를 얻을 수 있습니다. 콘텐츠 크기만 계산해야 하는 경우 요소의 콘텐츠 요소(예: 변환된 요소 내의

)에 offsetWidth 및 offsetHeight를 사용해야 합니다.

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