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

変換後の幅と高さの決定

回転などの変換を HTML 要素に適用する場合、JavaScript のデフォルトのメソッドでは変換後のデータが正確に取得されない場合があります。幅と高さ。

問題:

回転変換 (例:rotate(45deg)) を適用した後、要素の寸法が異なって見える場合があります (例:正方形は長方形として表示されます)。ただし、幅や高さなどの JavaScript プロパティは、変換されていない元の値を返します。

解決策:

変換後の実際の寸法を取得するには、getBoundingClientRect() メソッドを使用します。 HTMLDOMElement。

<code class="javascript">const element = document.getElementById('element');

// Apply the transformation
element.style.transform = 'rotate(45deg)';

// Get the transformed dimensions
const dimensions = element.getBoundingClientRect();

console.log('Transformed Width:', dimensions.width);
console.log('Transformed Height:', dimensions.height);</code>

このメソッドは、変換行列を考慮した後の要素の寸法を含むオブジェクトを返します。

例:

A Chrome では、45 度回転後の 11x11 の正方形は 17x17 の長方形になります。 getBoundingClientRect() メソッドは 17x17 の寸法を正確に報告しますが、元の幅と高さのプロパティは依然として 11x11 を返します。

以上がJavaScript で変換された HTML 要素の正確な幅と高さを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。