ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript で変換された HTML 要素の正確な幅と高さを取得するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-10-28 02:48:02
オリジナル
1010 人が閲覧しました

How to Get Accurate Width and Height of Transformed HTML Elements in JavaScript?

変換後の幅と高さの決定

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート