[解決済み] HTML要素の実際の幅と高さを取得するにはどうすればよいですか？

質問

があるとします。 <div> を、ブラウザのディスプレイ（ビューポート）の中央に表示したい場合。そのために <div> 要素を使用します。

何を使えばいいのでしょうか？ブラウザの互換性についての情報も含めて教えてください。

解決方法は？

を使用する必要があります。 .offsetWidth と .offsetHeight プロパティがあります。 これらは要素に属していることに注意してください。 .style .

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

機能 .getBoundingClientRect() CSS変換を行った後の要素の寸法と位置を浮動小数点数で返す。

> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}