幅（）、outerWidthの、はinnerWidth、clientWidth、clientX、がscreenX的区别

記事から転載 https://segmentfault.com/a/1190000010746091

$（ウィンドウ）.width（）与$（ウィンドウ）.height（）

$(window).width()そして$(window).height()：画面の幅と高さは、可視光領域を得て、スクロールバーのツールバーが含まれていません。

$(window).width() = width + padding
$(window).height() = height + padding

document.documentElement.clientWidth与document.documentElement.clientHeight

document.documentElement.clientWidthそしてdocument.documentElement.clientHeight：画面の幅と高さを取得することと同じである得閲覧可能なjQueryの（ウィンドウ）の結果.widthとスクロールバーとツールバーを含む領域ではなく、（）と（ウィンドウ）.height（）です。

document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding

window.innerWidth与window.innerHeight

window.innerWidthそしてwindow.innerHeight：高度に可視領域を得ることは広いが、縦window.innerWidth幅の幅は、スクロールバー、高水平スクロールバーを含む高さwindow.innerHeight（IE8と下部ブラウザがサポートしていない）を含みます。

window.innerWidth = width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度

window.outerWidth与window.outerHeight

window.outerWidthそしてwindow.outerHeight：ツールバーやウィンドウの幅と高さのスクロールバープラスを得ています。

window.outerWidth = width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度

document.body.clientWidth与document.body.clientHeight

document.body.clientWidthそしてdocument.body.clientHeight：得られ幅document.body.clientWidthは、表示可能領域であるが、得られdocument.body.clientHeightは、コンテンツが200pxの場合にのみ、あなたは、画面の表示領域を通って、それを取得したい場合は、その高さは、200pxのある非常に本文の内容です以下のように、必要なスタイルセットを幅に対する高さ：

body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}

キーは、次のとおりです。体の高さ：100％の値に影響を与えるdocument.body.clientHeight。
マージンのボディ：0、パディング：影響の0 document.body.clientWidth。

offsetWidth＆offsetHeight

幅と高さ+パディング+ボーダー+スクロールバー自体を返します。

offsetLeft＆offsetTop

すべてのHTML要素は、要素のXとY座標を返すためにoffsetLeftとoffsetTopプロパティを持っています

1の要素標的子孫要素と他の要素（テーブル手段）に関して、これらの属性は、座標が祖先要素に対するもので返さ
2.一般的な要素が文書に相対的である、ドキュメント座標に戻されます。

offsetParentの属性は、これらの属性の親要素がoffsetParentのがnullの場合、これらの属性は、文書の座標であり、相対的なものを指定します

//用offsetLeft和offsetTop来计算e的位置
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
    };
}

scrollWidth＆scrollHeight

これらの2つの属性がプラスコンテンツエリアパディング要素に加え、任意のオーバーフローのコンテンツサイズです。

そこにはオーバーフローしない場合、およびしたがって、これらの属性clientWidth clientHeightは等しいです。

scrollLeft＆scrollTopスプライト

スクロールバーの要素の位置を指定します。

scrollLeftとscrollTopスプライトは、転動体の内容を作るためにそれらを設定することにより、書き込み可能な財産です。

互換性

innerWidthおよびinnerHeightは1.window outerWidthプロパティおよびouterHeight IE8の属性と次の属性がサポートされていません。

2.テストブラウザIE、Firefoxの、Googleは、360ブラウザは、Safariはdocument.documentElement.clientWidthとdocument.documentElement.clientHeightをサポートしています。

彼は加えました：

1.document.body.clientWidth＆.document.body.clientHeight体の実際の幅と高さ

2.window.screenX、ブラウザwindow.screenY画面の左上隅の左上隅からの距離

ブラウザの表示領域の左上隅から3 event.clientX、event.clientYイベントトリガ点距離

画面の左上隅から4.event.screenX、event.sreenYイベントトリガ点距離

5.event.pageX、ページの位置左コーナーからevent.pageYイベントトリガ・ポイント（event.clientX + document.body.srollLeft、event.clientY + document.scrollTopに相当）