HTML 要素の実際の幅と高さを取得するにはどうすればよいですか?

HTML 要素の実際の幅と高さを決定する

ブラウザのビューポート内で HTML 要素を中央に配置するには、正確に計算する必要があります。その寸法。要素の実際の幅と高さを効率的に取得する方法は次のとおりです。

要素プロパティの使用

HTMLElement インターフェイスの .offsetWidth プロパティと .offsetHeight プロパティは、実際の幅を表します。と要素の高さをそれぞれ示します。これらのプロパティは要素の一部であり、その .style オブジェクトではないことに注意してください。

const width = document.getElementById('foo').offsetWidth;

getBoundingClientRect() の使用

あるいは、getBoundingClientRect() メソッドを使用することもできます。ビューポート内の要素の寸法と位置を浮動小数点数として取得するために使用されます。これには、CSS 変換を適用した後の要素の位置、幅、高さが含まれます。

console.log(document.getElementById('foo').getBoundingClientRect());

// Output:
// DOMRect {
//   ...
//   width: 631,  // Element's width in pixels
//   height: 54.7, // Element's height in pixels
//   ...
// }

ブラウザのサポート

どちらの手法も最新のブラウザでサポートされています。含む:

• Chrome
• Firefox
• Edge
• Safari
• Opera

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