[DOM基礎]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等屬性的解釋

因爲常常搞混這幾個屬性，因此查找資料總結一下，方便之後翻出來溫習。

1、偏移量-以offset開頭的

　　一、offsetHeight：元素在垂直方向上佔用的空間大小，像素。包括元素的高度、可見的水平滾動條的高度、上邊框高度和下邊框高度。

　　二、offsetWidth：同上，水平上佔用的空間。

　　三、offsetLeft：元素的左外邊框至包含元素的左內邊框的距離。

　　四、offsetTop：同上，上部的距離。

　　包含元素的引用保存在offsetParent屬性中，不必定是parentNode，好比<td>的offsetParent是<table>，由於它是DOM層次中距<td>最近的一個具備大小的元素。

　　

　　全部的偏移量屬性都是只讀的，並且每次訪問都要從新計算，避免重複訪問。

2、客戶區大小-以client開頭的

　　一、clientHeight：內容區+內邊距的高度。

　　二、clientWidth：同上，寬度。

　　

　　這兩個屬性也是隻讀和須要從新計算的。

3、滾動大小-scroll開頭的

　　一、scrollHeight：元素內容的總高度。

　　二、scrollWidth：總寬度。

　　三、scrollLeft：被隱藏在內容區域左側的像素數。經過設置這個屬性能夠改變滾動位置。

　　四、scrollTop：被隱藏在內容區域上方的像素數。能夠設置。

　　

4、innterHeight和outerHeight

　　一、innerHeight：瀏覽器窗口的視口（viewport）高度（以像素爲單位），若是存在水平滾動條，則包括它。

　　二、innerWidth：同上，寬度。

　　三、outerHeight：獲取整個瀏覽器窗口的高度（單位：像素），包括側邊欄（若是存在）、窗口鑲邊（window chrome）和窗口調正邊框（window resizing borders/handles）。

　　四、outerWidth：同上，寬度。

5、經常使用屬性

　　一、獲取瀏覽器視口高度：

window.innerHeight;
document.documentElement.clientHeight
document.body.clientHeight
document.documentElement.offsetHeight // 僅在html元素無邊框的狀況下

　　二、視口是否滾動到底部

document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight

6、其餘

　　對於以上屬性，某些低版本瀏覽器可能會有怪異的表現，這裏沒有考慮（主要是低版本IE）。

　　資料來源：JS高級程序設計、MDN