HTML 要素の位置とサイズを取得する

HTML HTML5 JavaScript jQuery 位置 サイズ

　ページ下部に図でも示しています。

画面サイズ
・ // 画面の縦サイズ（スクロールバーの幅を含む）。
window.innerHeight;
・ // 画面の横サイズ（スクロールバーの幅を含む）。
window.innerWidth;
画面の位置
・ var rc = document.documentElement.getClientRects();

// 画面の上端までの距離。
// 画面がどれだけ下へスクロールしたのかを表す（値は 0 以下）。
rc[0].top;

// 画面上端からページ下端までの距離。
rc[0].bottom;

// 画面の左端までの距離。
// 画面がどれだけ右へスクロールしたのかを表す（値は 0 以下）。
rc[0].left;

// 画面左端からページ右端までの距離。
rc[0].right;

// 画面の縦サイズ（スクロールバーの幅は除く）。
rc[0].height;

// 画面の横サイズ（スクロールバーの幅は除く）。
rc[0].width;
要素の位置とサイズ（画面からの距離）
・ // element は div 等の要素。
var rc = element.getClientRects();

// 画面上端から要素上端までの距離（※）。
rc[0].top;

// 画面上端から要素下端までの距離（※）。
rc[0].bottom;

// 画面左端から要素左端までの距離（※）。
rc[0].left;

// 画面左端から要素右端までの距離（※）。
rc[0].right;

// ※　要素が画面よりも上左にあるとマイナス値になります。

// 要素の縦サイズ。
rc[0].height;

// 要素の横サイズ。
rc[0].width;
要素の位置（ページからの距離／jQuery）
・ // element は div 等の要素。
var offset = $(element).offset();

// ページ上端から要素上端までの距離。
offset.top;

// ページ左端から要素左端までの距離。
offset.left;
要素から位置（親要素からの距離／jQuery）
・ // element は div 等の要素。
var position = $(element).position();

// 親要素上端から要素上端までの距離。
position.top;

// 親要素左端から要素左端までの距離。
offset.left;
　以下に図で示します。

　以上です。