スタイルとの違いオフセット
オフセットを任意のスタイルシートのスタイル値の可能な
単位なしの値オフセット一連の
境界線を含めるoffsetWidthが+幅+パディング
offsetWidth他の属性が読み取り専用されている属性は、のみを割り当てることはできません取得することができ
、我々は要素のサイズを取得したいので、位置は、オフセット
スタイル
スタイルでより適切
です。取得できるのは、インラインスタイルシートのスタイル幅のみです。幅は、単位
付きの文字列
です。幅には、パディングとボーダースタイルの値は含まれません。幅は読み取り可能なプロパティであり、取得または割り当てできます。
ドット構文とオフセット取得要素の違い
：構文機能：1.インライン標準属性を
取得できる（メイン）2.文法によって動的に追加された属性を
取得できる3.インラインカスタム属性を
取得できない4.インライン属性
オフセット取得機能を取得できない：1 。行の内外の属性を取得できます
。2.属性値は数値タイプであり、単位はありません。3
.ページに表示される要素の実際の幅と高さを取得します（幅/高さ+パディング+ボーダー）
3つのファミリの違い（3つのファミリの概要）
1.2.1幅と高さ
clientWidth =幅+パディング
clientHeight =高さ+パディング
offsetWidth =幅+パディング+ボーダー
offsetHeight =高さ+パディング+ボーダー
scrollWidth =コンテンツの幅（ボーダーを除く）幅+パディング
scrollHeight =コンテンツの高さ（ボーダーを除く）
1.2.2上と左の
offsetTop / offsetLeft：
呼び出し元：任意の要素。（ボックスベース）
機能：配置された親ボックスからの距離。
scrollTop / scrollLeft：（ボックスを呼び出すこともできます。スクロールバーが必要です）
呼び出し元：document.body.scrollTop / .....（ウィンドウ）
関数：ブラウザが表示できない部分（スクロールされる部分）。
clientY / clientX：（clientTop / clientLeftの値はボーダーです）
呼び出し元：event.clientX（イベント）
ロール：ブラウザの表示領域（左と上）からのマウスの距離。
//幅と高さ
//ボーダーでオフセット
//ボーダーなしでスクロール、コンテンツの幅と高さ
//国境のないクライアント
//上と左
//親ボックスの位置を使用したオフセットとボックスの間
の距離
//スクロールされた部分の距離//クライアント境界の幅と高さ
// clientXおよびclientY
//イベントコール、マウスからブラウザの表示可能領域までの距離
クライアントファミリの特別な用途：ブラウザの幅/高さ（表示可能領域）を確認する
Onresizeイベント
は、ブラウザーのサイズが1ピクセルでも変化すると、このイベントをトリガーします。
イベントの概要の
違い：
1.window.onscroll画面のスライド
2.window.onresizeブラウザーのサイズ変更
3.window.onloadページの読み込みが完了しました
4.div.onmousemoveマウスがボックス上を移動します
（注：ボックスは移動しません!!!）
5。 onmouseup / onmousedown == onclick画面の幅と高さを取得します
window.screen.width
解像度は画面イメージの精度であり、モニターが表示できるピクセル数を指します。
私たちのコンピューターは一般的に、水平方向に1280ピクセル、垂直方向に960ピクセルです。
私たちが映画を見るとき、それは全画面と半画面です、それだけです。
オフセットファミリ：要素の実際の幅と高さを取得します
console.log（box.offsetWidth）;
console.log（box.offsetHeight）;
スクロールファミリ：scrollWidth、scrollHeight、scrollLeft、scrollTop
役割は次のとおりです：要素コンテンツの幅を取得するscrollWidth、scrollHeight
要素コンテンツの実際の位置を取得するための高（IE8）scrollLeft、scrollTop
console.log（box.scrollWidth）;
console.log（box.scrollHeight）;
console.log（box.scrollLeft）;
console.log（box.scrollTop）;
scrollバースクロールイベント：onscroll