offset家族

三大家族（offset/scroll/client）

事件物件/event   （事件被觸動時，滑鼠和鍵盤的狀態）（通過屬性控制）

offset這個單詞本身是--偏移，補償，位移的意思。

js中有一套方便的獲取元素尺寸的辦法就是offset家族；

offsetWidth和offsetHight以及offsetLeft和offsetTop以及offsetParent

共同組成了offset家族。

1.2.1  offsetWidth和offsetHight （檢測盒子自身寬高+padding+border）

這兩個屬性，他們繫結在了所有的節點元素上。獲取之後，只要呼叫這兩個屬性，我們就能夠獲取元素節點的寬和高。

offset寬/高  =  盒子自身的寬/高 + padding+border；

offsetWidth =width+padding+border；

offsetHeight =Height+padding+border；

1.2.2  offsetLeft和offsetTop （檢測距離父盒子有定位的左/上面的距離）

返回距離上級盒子（帶有定位）左邊s的位置

如果父級都沒有定位則以body為準

offsetLeft 從父親的padding 開始算,父親的border 不算。

在父盒子有定位的情況下，offsetLeft == style.left(去掉px)

1、返回改物件的父級 （帶有定位）

         如果當前元素的父級元素沒有進行CSS定位 （position為absolute或           relative，fixed），    offsetParent為body。

2、如果當前元素的父級元素中有CSS定位      （position為absolute或                relative，fixed），    offsetParent取最近的那個父級元素。

一、最大區別在於offsetLeft可以返回沒有定位盒子的距離左側的位置。

而 style.left不可以

二、offsetTop 返回的是數字，而 style.top 返回的是字串，除了數字外還帶有單位：px。

三、offsetTop 只讀，而 style.top 可讀寫。（只讀是獲取值，可寫是賦值）

四、如果沒有給 HTML 元素指定過 top 樣式，則style.top 返回的是空字串。

style.left在=的左邊和右邊還不一樣。（左邊的時候是屬性，右邊的時候是值）

Scroll家族組成

檢測盒子的寬高。（呼叫者：節點元素。屬性。）

盒子內容的寬高。（如果有內容超出了，顯示內容的高度）

IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小

scrollLeft和scrollTop

網頁，被瀏覽器遮擋的頭部和左邊部分。

被捲去的頭部和左邊部分。

相容性問題

一、未宣告 DTD（谷歌只認識他）

document.body.scrollTop

二、已經宣告DTD（IE678只認識他）

   document.documentElement.scrollTop

三、火狐/谷歌/ie9+以上支援的

   window.pageYOffset

相容寫法

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var aaa = document.documentElement.scrollTop + document.body.scrollTop;

1.1   事件物件的獲取（event的獲取）

IE678中，window.event

在火狐谷歌中，event或者，在事件繫結的函式中，加參，這個引數就是event.

  Box.onclick = function (aaa){   aaa就是event     }

1.2   相容獲取方式有兩種：

不寫引數直接使用event;

寫引數，但是為event....var  event  = event || window.event;(主要用這種)

1.3   event內容重要內容

PageY/pageX: 滑鼠位於整個網頁頁面的頂部和左側部分的距離。（頁面）

ScreenY/screenX: 滑鼠位於螢幕的上方和左側的距離。（螢幕）

ClientX/clientY: 滑鼠位於瀏覽器的左側和頂部的距離。（瀏覽器大小和位置）

1.1   PageY和pageX的相容寫法（很重要）

在頁面位置就等於 = 看得見的+看不見的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

client家族

1、clientWidth   獲取網頁可視區域寬度（兩種用法）

   clientHeight  獲取網頁可視區域高度（兩種用法）

     呼叫者不同，意義不同：

                   盒子呼叫：             指盒子本身。

                   body/html呼叫：      可視區域大小。 

2、clientX       滑鼠距離可視區域左側距離（event呼叫）

   clientY      滑鼠距離可視區域上側距離（event呼叫）

3、clientTop/clientLeft           盒子的border寬高

clientWidth  = width + padding

clientHeight  = height + padding

offsetWidth  = width + padding + border

offsetHeight  = height + padding + border

scrollWidth   = 內容寬度（不包含border）width + padding

scrollHeight  = 內容高度（不包含border）

offsetTop/offsetLeft：

         呼叫者：任意元素。(盒子為主)

         嘛作用：距離父系盒子中帶有定位的距離。

scrollTop/scrollLeft:(盒子也可以呼叫，必須有滾動條)

         呼叫者：document.body.scrollTop/.....(window)

         嘛作用：瀏覽器無法顯示的部分（被捲去的部分）。

clientY/clientX:（clientTop/clientLeft 值的是border）

         呼叫者：event.clientX(event)

         嘛作用：滑鼠距離瀏覽器可視區域的距離（左、上）。

//    width和height
//    offset帶border
//    scroll不帶border，內容的寬高
//    client不帶border

//    top和left
//    offset距離父系盒子帶有定位的盒子之間的距離
//    scroll被捲去的部分的距離
//    clientborder的寬高

    //clientX和clientY
//    event呼叫，滑鼠距離瀏覽器的可視區域的距離

1.3  client家族特殊用法之:檢瀏覽器寬/高度(可視區域)

只要瀏覽器的大小改變，哪怕1畫素，都會觸動這個事件。

區分：

    1.window.onscroll          螢幕滑動

    2.window.onresize           瀏覽器大小變化

    3.window.onload          頁面載入完畢

    4.div.onmousemove         滑鼠在盒子上移動

         （注意：不是盒子移動！！！）

  5.onmouseup/onmousedown  == onclick

window.screen.width

解析度是螢幕影象的精密度，指顯示器所能顯示的畫素有多少。

     我們的電腦一般：

橫向1280個畫素點，

縱向960個畫素點。

我們看電影的時候是滿屏和半屏的，就是這。