JavaScriptでHTML要素の高さを取得する方法 - Qiita

JavaScript で HTMLの要素の高さ / 幅を取得しようと思った時、outer やら avail やら offset やら、オブジェクトにやたらとプロパティが生えていて混乱したのでまとめました。 検証環境 iMac / iPad / iPhone にて 2021年10月時点での Google Chrome 最新版で検証しました。デスクトップ版の Chrome は v94 でした。 プロパティを全列挙するとごちゃごちゃして見づらくなるため、高さに絞って説明しています。幅を得る時は Height を Width に読み替えてください。 ディスプレイのサイズ - screen オブジェクト デバイスのディスプレイのサイズを得るには screen オブジェクト を参照します。 const h1 = window.screen.height; const h2 = window.scree