JavaScriptは視認エリア、ページの内容、ブラウザの幅の高さ、スクロールの高さを取得します.

一、windowオブジェクト
1.1画面左上のx座標とy座標(読み取り専用)

screenLeft||screenX
screenTop||screenY

互換性
IE、SafariとOperaはSreenLeft/SreenTopをサポートします.
Firefox、SafariはSreenX/SreenYをサポートします.
Chromeはすべてサポートします
1.2ドキュメントエリアの幅の高さ(読み取り専用)
ドキュメントエリアの幅の高さ(ツールバー、コンソールなどを含まず、ページ表示エリアの幅の高さのみ)

innerWidth||document.documentElement.clientWidth||document.body.clientWidth
innerHeight||document.documentElement.clientHeight||document.body.clientHeight

innerWidthは非IEの書き方で、documentはIEの書き方です.
1.3ブラウザ全体のウィンドウの幅の高さ(読み取り専用)outerWidth、outerHeight
IEはサポートされていません.IEはブラウザウィンドウ全体の幅の高さを取得する方法がありません.
1.4 PageXOffset、pageYOffset
現在のページのウィンドウ表示エリアの左上隅に対するX/Y位置を設定または読み込みます.
二、イベント対象(イベント対象)
DOM上のあるイベントをトリガーすると、イベントに関するすべての情報がこのオブジェクトに含まれているイベントオブジェクトイベントが発生します.すべてのブラウザはイベントオブジェクトをサポートしていますが、サポートの仕方は違います.
普通のブラウザはeventie 678がwindow.eventをサポートします.
古いバージョンのブラウザと互換性が必要なら、互換性のある書き方ができます.

var event = event || window.event;

2.1 event.screenX event.screenY
イベントが発生した場合、マウスポインタはディスプレイ画面の左上に対して水平／垂直座標を返します.

    var box = document.getElementById('box');
    box.addEventListener('click',function(event){
        var screenX = event.screenX;
        var screenY = event.screenY;
        alert('              X   ：'+screenX+'，               Y   ：'+screenY);
    })

2.2 event.clientX event.clientY

返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平／垂直窗口坐标。

可视区域不包括工具栏和滚动条，IE事件和w3c标准事件都定义了这2个属性

    var box = document.getElementById('box');
    box.addEventListener('click',function(event){
        var clientX = event.clientX;
        var clientY = event.clientY;
        alert('           X   ：'+clientX+'，            Y   ：'+clientY);
    })

2.3 event.offsetX event.offsetY（仅IE）

返回鼠标指针的位置，相对于事件源元素的水平（垂直坐标）

    var box = document.getElementById('box');
    box.addEventListener('click',function(event){
        var offsetX = event.offsetX;
        var offsetY = event.offsetY;
        alert('     box X   ：'+offsetX+'，      box Y   ：'+offsetY);
    })

2.4 event.pageX event.pageY（不支持IE）

返回鼠标指针的位置，类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。

三、document对象

3.1 文档区宽高：clientWidth／clientHeight

示例图见1.2小节

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

3.2 htmlの総幅高:offset Width／offset Height

document.documentElement.offsetWidth || document.body.offsetWidth
document.documentElement.offsetHeight || document.body.offsetHeight

ある要素の全体的な幅の高さを取得するには、offset Width／offset Height方法を用いることもできる.
3.3スクロール高さ(スクロールバーのスクロール長さ)

document.documentElement.scrollTop || document.body.scrollTop

四、DOMオブジェクトのoffset家族
4.1計算要素の幅の高さ:offset Width、offset Height
offset Widthの計算方法は以下の通りである.
offset Width=width+border+padding
4.2位置offset Leftとoffset Topを取得する
上の箱(一番近いのは位置決め付き)から左の位置に戻ります.
父のクラスが決まっていない場合は、bodyを基準とします.
offset Leftは父のクラスのpaddingから父のborderとは言えません.つまり、子の箱から父の箱の縁までの距離です.
4.3位置決め付き親レベル要素offset Partを取得する
offset Partは、オブジェクトの親レベル(位置決め付き)を返します.
4.4 offset Parent Nodeとの違い:
現在の要素の親レベル要素がCSSポジショニングを行っていない場合、offsetPartはbodyとなります.
現在の要素の親レベル要素にCSSポジショニングがある場合、offsetPartは一番近い親レベルの要素を取る.
4.5 offset Topとstyle.topの違い

の最大の違いは、Offset Leftが、ボックスがない距離の左側の位置に戻ることができることである.style.topは位置決めの箱だけがleft top right

があってはいけません.

offset Topは数字を返しますが、style.topは文字列を返します.数字以外に単位:pxもあります.

offset Topは読み取り専用ですが、style.topは書き込み可能です.

HTML要素にtopスタイルを指定していない場合、style.topは空の文字列を返します.

一番重要な違いはstyle.leftのみが行内スタイルoffset Left随意

を得ることができます.
4.6付:行内スタイルを取得する幅の高いele.style.width/heightdiv.style.widthは、行の中のスタイルしか取得できません.cssスタイルテーブルの中のスタイルは取得できません.
五、Window対象方法
5.1 moveBy()
文法:window.moveBy(x,y)
ウィンドウの現在の座標に対して、指定されたピクセルに移動します.
x:ウィンドウを右に移動するピクセル
y:ウィンドウを下に移動するピクセル
5.2 moveTo()
文法:window.moveTo(x,y)
ウィンドウの左上を指定された座標に移動します.
x:ウィンドウの新しい位置のx座標
y:ウィンドウの新しい位置のy座標
ヒント:セキュリティ上の理由から、ブラウザはこの方法を制限して、ウィンドウをスクリーンから取り除くことができません.
5.resizeBy()
文法:resizeBy(width,height)
指定されたピクセルに応じてウィンドウのサイズを調整します.
width:必要で、ウィンドウの幅を増加させるピクセル数.正、負の値があります.
height:オプションで、ウィンドウの高さを増加させるピクセル数.正、負の値があります.
5.4リゾット()
文法:resizett(width,height)
ウィンドウのサイズを指定の幅と高さに調整します.
width:必要です.調整したいウィンドウの幅.ピクセルで計算する
height:オプションで、調整したいウィンドウの高さです.ピクセルで計算する
5.5 scrollBy()
文法:scrollBy(xnum、ynum)
指定したピクセル数をスクロールします.
xnum:必要で、ドキュメントを右にスクロールするピクセル数
必須、文書を下にスクロールするピクセル数
5.6 scrollto()
文法:scrollTo(xpos、ypos)
指定された座標に内容をスクロールします.
xpos:必要です.ウィンドウドキュメント表示エリアの左上に表示するドキュメントのx座標
ypes:必要です.ウィンドウドキュメント表示エリアの左上に表示する文書のy座標