JS中的位置與大小

原文連接：http://mrzhang123.github.io/2016/08/03/js-position/

最近事兒比較多，一直沒時間寫東西，前幾天又遇到關於獲取元素大小的問題，每次遇到這類問題就翻書，比較費時間，因此總結一下。

1.元素的偏移量

元素的偏移量包括元素在屏幕上佔用的全部可見的空間。元素的可見大小由其高度、寬度決定，包括全部內邊距、滾動條和邊框大小（注意：這裏並不包括外邊距）。

2.客戶區大小

元素的客戶區大小指的是元素內容機器內邊距佔據空間的大小。

要肯定瀏覽器可見窗口的大小，可使用document.documentElement或document.body（IE7以前的版本中）。

從以上兩個咱們能夠看出元素偏移量（offset）與客戶區大小（client）的區別在於有沒有包含邊框，客戶區大小不包含邊框。

3.滾動大小

scrollWidth和scrollHeight主要用於肯定元素內容的實際大小。因此帶有垂直滾動條的頁面總高度就是document.documentElement.scrollHeight。

4.窗口大小

在現代主流瀏覽器中提供了四個屬性肯定窗口的大小，分別爲：innerWidth、innerHeight、outerWidth和outerHeight。

4.1. outerWidth和outerHeight

返回瀏覽器窗口自己的尺寸（不管是從外層的window對象仍是從某個框架訪問）

4.2. innerWidth和innerHeight

返回該容器中頁面試圖去的大小（減去邊框寬度）

注意：

這裏在《javascript高級程序設計》（第三版）中寫道在chrome中outer與inner返回的值是同樣的，這算是chrome的一個bug，我在chrome 53中已經修復，可是在QQ瀏覽器中（內核爲chromium47）依舊是相等的，這須要注意！
clientWidth和clientHeight。

在主流瀏覽器中，document.docuementElement.clientWidth和document.documentElement.clientHeight中保存的是頁面視口信息。返回的值與window.innerHeight，window.innerWidth同樣。
可是window.innerHeight在IE8及如下瀏覽器中結果是undefined，而document.documentElement.clientHeight還有值。因此在各個瀏覽器下取得頁面視口大小的代碼以下：

var pageWidth=window.innerWidth,
    pageHeight=window.innerHeight;
if(typeof pageWidth !== 'number'){
    if(document.compatMode === 'CSS1Compat'){
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight;
    }else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
}

代碼中document.compatMode用於判斷瀏覽器處於什麼模式，它有兩個值：
BackCompat:瀏覽器處於怪異模式
CSS1Compat:瀏覽器處於標準模式不一樣模式下，獲取瀏覽器的寬度的方法不一樣，在代碼中已經作了判斷。