輕鬆弄清JavaScript中的offset、scroll、client

  初次見到這張圖，以爲好亂額，因此下面咱們來慢慢理順這個東西。

1、理順offset

在這裏咱們能夠看到，關於offset共有5個東西須要弄清楚：

　　一、offsetParent

　　二、offsetTop

　　三、offsetLeft

　　四、offsetWidth

　　五、offsetHeight

　　咱們根據難易程度把以上5點分爲三類來說解。

第一類：offsetWidth與offsetHeight

      obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的寬度，整型，單位像素。

     obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的高度，整型，單位像素。

    offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

　 offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

第二類：offsetLeft與offsetTop

     obj.offsetTop 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算上側位置，整型，單位像素。

    obj.offsetLeft 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置，整型，單位像素

     offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當前元素的margin-left)。

　　offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當前元素的margin-top)。

第三類：offsetParent

 offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），而且是已進行過CSS定位的容器元素。 若是這個容器元素未進行CSS定位, 則offsetParent屬性的取值爲根元素的引用。

　　總的來講兩條規則：

　　一、若是當前元素的父級元素沒有進行CSS定位（position爲absolute或relative），offsetParent爲body。

　　二、若是當前元素的父級元素中有CSS定位（position爲absolute或relative），offsetParent取最近的那個父級元素。

2、理順scroll

     scrollHeight: 獲取對象的滾動高度，對象的實際高度；

     scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離

     scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離

     scrollWidth:獲取對象的滾動寬度

3、理順client

   1.clientHeight, clientWidth:
   這兩個屬性大致上顯示了元素內容的象素高度和寬度.理論上說這些測量不考慮任何經過樣式表加入
元素中的頁邊距,邊框等.                                                                                                         

   clientWidth 是對象可見的寬度，不包滾動條等邊線，會隨窗口的顯示大小改變

   2.clientLeft,clientTop:
   這兩個返回的是元素周圍邊框的厚度,若是不指定一個邊框或者不定位改元素,他的值就是0. 

   clientLeft 返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離。

4、常見的區別

一、offsetTop 與 style.top 的區別

     咱們知道 offsetTop 能夠得到 HTML 元素距離上方或外層元素的位置，style.top 也是能夠的，兩者的區別是：
1、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px 。

2、offsetTop 只讀，而 style.top 可讀寫。

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

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是一樣道理。

二、clientHeight、offsetHeight和scrollHeight

      咱們這裏說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。

     這四種瀏覽器分別爲IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

     clientHeight：是內容可視區域的高度，也就是說頁面瀏覽器中能夠看到內容的這個區域的高度，通常是最後一個工具條如下到狀態欄以上的這個區域，與頁面內容無關。

   offsetHeight
    IE、Opera 認爲 offsetHeight = clientHeight + 滾動條 + 邊框。
    NS、FF 認爲 offsetHeight 是網頁內容實際高度，能夠小於 clientHeight。

    scrollHeight
    IE、Opera 認爲 scrollHeight 是網頁內容實際高度，能夠小於 clientHeight。
    NS、FF 認爲 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。

簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、 FF 認爲 offsetHeight 和 scrollHeight 都是網頁內容高度，只不過當網頁內容高度小於等於 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 能夠小於 clientHeight。
IE、Opera 認爲 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度便可。

可是
FF 在不一樣的 DOCTYPE 中對 clientHeight 的解釋不一樣， xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。
標題：scrollTop、scrollLeft、scrollWidth、scrollHeight

scrollTop 是「卷」起來的高度值，示例：

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">

<div style="width:50px;height:300px;background-color:#0000FF;" id="t">若是爲 p 設置了 scrollTop，這些內容可能不會徹底顯示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>

因爲爲外層元素 p 設置了 scrollTop，因此內層元素會向上卷。

scrollLeft 也是相似道理。

咱們已經知道 offsetHeight 是自身元素的寬度。

而 scrollHeight 是內部元素的絕對寬度，包含內部元素的隱藏的部分。

上述中 p 的 scrollHeight 爲 300，而 p 的 offsetHeight 爲 100。

scrollWidth 也是相似道理。

IE 和 FireFox 全面支持，而 Netscape 和 Opera 不支持 scrollTop、scrollLeft（document.body 除外）。

三、offsetTop、offsetLeft、offsetWidth、offsetHeight

1.offsetTop :

當前對象到其上級層頂部的距離.
不能對其進行賦值.設置對象到頁面頂部的距離請用style.top屬性.

2.offsetLeft :

當前對象到其上級層左邊的距離.
不能對其進行賦值.設置對象到頁面左部的距離請用style.left屬性.

3.offsetWidth :

當前對象的寬度.
與style.width屬性的區別在於:如對象的寬度設定值爲百分比寬度,則不管頁面變大仍是變小,style.width都返回此百分比,而offsetWidth則返回在不一樣頁面中對象的寬度值而不是百分比值

4.offsetHeight :

與style.height屬性的區別在於:如對象的寬度設定值爲百分比高度,則不管頁面變大仍是變小,style.height都返回此百分比,而offsetHeight則返回在不一樣頁面中對象的高度值而不是百分比值