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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。