～Top、～Heightなどの高さに関連したプロパティ一覧 & メモ

～Top、～Heightなどの高さに関連したプロパティ一覧 & メモ:

jQueryはではなく、生のJavaScriptのDOMプロパティです。

※検証は十分にはしていません。

w3schoolsのExampleで試してみると理解が進みます。

分かりやすい図

ウィンドウの高さ

window.innerHeight

スクロールバーを含まないウィンドウの高さ

結構使いそう。

w3schools（機械翻訳）から引用

innerHeightプロパティは、ウィンドウのコンテンツ領域の高さを返します。

mdn
w3schools

window.outerHeight

w3schools（機械翻訳）から引用

outerHeightプロパティは、ツールバー/スクロールバーなどのすべてのインターフェイス要素を含む、ブラウザウィンドウの外側の高さを返します。

使わなさそう。

mdn
w3schools

スクロール量

window.pageYOffset

垂直方向のスクロール量を返します。このプロパティはScrollYのエイリアスです。

結構使いそう。

mdnから引用

クロスブラウザー互換性のため、window.scrollY ではなく window.pageYOffset を使用します。

mdn
w3schools

要素のある位置

element.clientTop

ボーダーの高さのみ？

使わなさそう。

mdnから引用

要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。clientTop は読込専用です。

Gecko ベースアプリケーションは、 Gecko 1.9 (Firefox 3、バグ 111207 で実装) から clientTop をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。

mdn
w3schools

element.offsetTop

親要素のスタイルのpositionにrelative、absolute、fixedが設定されていない場合は、

画面の上端から対象要素のmarginまでのピクセル数。（borderは含まない）

設定されている場合は、

その親要素（offsetParent）のpaddingの上端から対象要素のmarginまでのピクセル数。

結構使いそう。

mdnから引用

HTMLElement.offsetTop 読み取り専用プロパティは、offsetParent ノードの上端に対して現在の要素の距離を返します。

offsetParentについて(syncer.jpさんのページ)

offsetParentになる条件はスタイルシートでposition:relative、position:absolute、position:fixedのいずれかが指定された要素です。

mdn
w3schools
Syncer.jp

element.scrollTop

対象要素自体のスクロール位置。

（対象要素の中に対象要素より大きい要素があってスクロールが可能な場合の対象要素の上端からのピクセル数）

垂直スクロールバーがない場合は0。

普段は使わなさそうだけど使う時は使いそう。

mdn
w3schools

要素の高さ

element.clientHeight

w3schools（機械翻訳）から引用

clientHeightプロパティは、ボーダー、スクロールバー、またはマージンではなく、パディングを含むピクセル単位の表示可能な高さを返します。

表示可能な単語が指定されている理由は、要素の内容が実際の要素の高さよりも高い場合、このプロパティは表示される高さのみを返すためです（「その他の例」を参照）。

考え方としては要素の中身(コンテンツ)の見えている部分の高さ。

使いそう。

mdn
w3schools(一番下のExampleが一番わかりやすい)
Syncer.jp

element.offsetHeight

w3schools（機械翻訳）から引用

offsetHeightプロパティは、パディング、ボーダー、スクロールバーを含むピクセル単位の表示可能な高さを返します。マージンは返しません。

表示可能な単語が指定されている理由は、要素の内容が実際の要素の高さよりも高い場合、このプロパティは表示される高さのみを返すためです（「その他の例」を参照）。

考え方としては要素自体(marginは含まない)の高さ。

使いそう。

mdn(英語)
w3schools
Syncer.jp

element.scrollHeight

考え方としては要素の中身(コンテンツ)の見えない部分（垂直スクロール可能範囲）も含めた高さ。

ブラウザによって挙動が異なる可能性が高いらしい。

普段は使わないけど、使う時は使いそう。だけど使いにくそう。

mdn(英語)
w3schools
Syncer.jp

その他

element.getBoundingClientRect()

高さとか位置を返してくれる。

mdnから引用

getBoundingClientRect（）メソッドは、要素のサイズとその位置をビューポートに対して返します。

このメソッドは、left、top、right、bottom、x、y、width、heightの8つのプロパティを持つDOMRectオブジェクトを返します。

注：境界矩形を計算するときに、ビューポート領域のスクロール量が考慮されます。これは、スクロール位置が変更されるたびに矩形のエッジ（上端、左端、下端、および右端）が値を変更することを意味します。

使うかもしれない。

mdn
w3schools
JavaScript で DOM 要素の絶対座標を取得する方法