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