JavaScript で回転された要素の正確な寸法を取得するにはどうすればよいですか?

回転後の要素の寸法の決定

問題:transform:rotate(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 中国語 Web サイトの他の関連記事を参照してください。