座標（マウス/タッチ）

event.screenX                          // マウス/タッチのディスプレイに対するX座標
event.screenY                          // マウス/タッチのディスプレイに対するY座標

event.clientX                          // マウス/タッチのブラウザビューポートに対するX座標
event.clientY                          // マウス/タッチのブラウザビューポートに対するY座標

event.pageX                            // マウス/タッチのドキュメントに対するX座標 (IE非対応)
event.pageY                            // マウス/タッチのドキュメントに対するY座標 (IE非対応)

event.offsetX                          // マウス/タッチのイベント発生元に対するX座標 (IE特有)
event.offsetY                          // マウス/タッチのイベント発生元に対するY座標 (IE特有)

スクロール（ウィンドウ/ページ）

window.pageXOffset                     // X軸スクロールバーの右にスクロールできる距離 (読み取り専用/IE9以上/PCとモバイル両方対応)
window.pageYOffset                     // Y軸スクロールバーの下にスクロールできる距離 (読み取り専用/IE9以上/PCとモバイル両方対応)

document.body.scrollLeft               // X軸スクロールバーの右にスクロールできる距離 (モバイルのみ対応)
document.body.scrollTop                // Y軸スクロールバーの下にスクロールできる距離 (モバイルのみ対応)

document.documentElement.scrollTop     // X軸スクロールバーの右にスクロールできる距離 (PCのみ対応)
document.documentElement.scrollLeft    // Y軸スクロールバーの下にスクロールできる距離 (PCのみ対応)

document.scrollingElement.scrollTop    // X軸スクロールバーの右にスクロールできる距離 (IE非対応)
document.scrollingElement.scrollLeft   // Y軸スクロールバーの下にスクロールできる距離 (IE非対応)

サイズ（画面/ブラウザビューポート/ページ）

screen.width                           // 画面の幅
screen.height                          // 画面の高さ
screen.availWidth                      // 利用可能な画面の幅
screen.availHeight                     // 利用可能な画面の高さ

window.outerWidth                      // ブラウザウィンドウの幅
window.outerHeight                     // ブラウザウィンドウの高さ
window.innerWidth                      // ブラウザビューポートの幅
window.innerHeight                     // ブラウザビューポートの高さ

document.body.offsetWidth              // ページの幅
document.body.offsetHeight             // ページの高さ
document.body.clientWidth              // ページの表示可能な幅
document.body.clientHeight             // ページの表示可能な高さ
document.body.scrollWidth              // スクロールバーを含むページの幅
document.body.scrollHeight             // スクロールバーを含むページの高さ

DOM要素のサイズと距離

clientWidth                            // 要素の幅（可視コンテンツ領域 + 内側余白）
clientHeight                           // 要素の高さ（可視コンテンツ領域 + 内側余白）
clientLeft                             // 内側余白の左端とボーダーの左端の距離
clientTop                              // 内側余白の上端とボーダーの上端の距離

offsetWidth                            // 要素の幅（可視コンテンツ領域 + 内側余白 + ボーダー）
offsetHeight                           // 要素の高さ（可視コンテンツ領域 + 内側余白 + ボーダー）
offsetLeft                             // 隣接する親要素からの左の距離
offsetTop                              // 隣接する親要素からの上の距離

scrollWidth                            // 要素の幅（可視コンテンツ領域 + 内側余白 + ボーダー + スクロールバー）
scrollHeight                           // 要素の高さ（可視コンテンツ領域 + 内側余白 + ボーダー + スクロールバー）
scrollLeft                             // 要素のスクロール距離
scrollTop                              // 要素のスクロール距離

DOM要素のサイズと位置

getBoundingClientRect()                // 要素のサイズと座標の集合を返す
                                           > サイズ = 可視コンテンツ領域 + 内側余白 + ボーダー
                                           > 座標
                                                 left = 位移 + 外側余白
                                                 right = 位移 + 完全なボックスモデルの幅
                                                 top = 同left
                                                 bottom = 同right

getClientRects()                       // 要素の数個の矩形領域の配列オブジェクトを返す
                                           > ブロック要素の場合、getBoundingClientRectと同じ結果を返す
                                           > インライン要素の場合、インライン要素の行数に応じてオブジェクトの数が変わる
                                           > このメソッドは、インライン要素の改行や位置のオフセットを判断するために使用される

document.elementFromPoint(x, y)        // 指定された座標位置にある最上位の要素の最も内側の子要素を返す
                                           > 最上位とはz-indexが最大の要素
                                           > 最も内側とは最も内部の子要素
                                           > このメソッドは、要素の重複や衝突を検出するために使用される

最近の親コンテナ

offsetParent

最近の親要素との距離の集合を取得する

function getElementPosition(e) { 
    var x = 0, y = 0; 
    while (e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent; 
    } 
    return { x: x, y: y }; 
}

• テーブルや埋め込みフレームを使用したページでは、異なるブラウザでの実装により正確な値を得られない場合がある。
• ドキュメントにスクロールバーが含まれている場合、このメソッドは正しく動作しない可能性がある。