JavaScript で変換された要素の正確な幅と高さを取得するにはどうすればよいですか?

変換後の幅と高さの取得

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