以下內(nèi)容為看JS權(quán)威指南相關(guān)學(xué)習(xí)筆記
文檔坐標(biāo)和視口坐標(biāo)
文檔坐標(biāo)比視口坐標(biāo)更加基礎(chǔ)，并且在用戶滾動是不會發(fā)生變化。一般來說，要在兩種坐標(biāo)之間相互轉(zhuǎn)換，必須加上或者減去滾動的偏移量。（scroll offset）
"視口"是指實(shí)際顯示文檔內(nèi)容的瀏覽器的一部分，它不包括瀏覽器的外殼（如菜單、工具條和標(biāo)簽頁等）
當(dāng)我們在討論元素的位置時，必須先弄清楚所使用的坐標(biāo)是文檔坐標(biāo)還是視口坐標(biāo)。
視口坐標(biāo)：我們從上面視口的相關(guān)說明中就能明白，指的就是在固定的瀏覽器視口中的內(nèi)容。當(dāng)我們滾動滾動條的時候視口里的內(nèi)容一直在變化。視口坐標(biāo)是以瀏覽器視口的左上角為坐標(biāo)系的原點(diǎn)。
文檔坐標(biāo)：文檔坐標(biāo)是以文檔的初始狀態(tài)左上角為坐標(biāo)系的原點(diǎn)。當(dāng)我們滾動滾動條的時候，文檔坐標(biāo)的X和Y相應(yīng)的增加。
我的理解：視口坐標(biāo)就是瀏覽器的這一個視口，里面的內(nèi)容隨滾動條的滾動而變化，視口一直保持不變。文檔坐標(biāo)就是整個文檔的內(nèi)容，和視口坐標(biāo)在初始狀態(tài)時是一樣的。
為了在坐標(biāo)系之間互相轉(zhuǎn)換，我們需要判斷瀏覽器窗口的滾動條的位置。
window對象的pageXOffsets和pageyoffsets IE8以及之前的版本不支持
srcollLeft和scrollTop 所有現(xiàn)代瀏覽器以及IE均支持
標(biāo)準(zhǔn)兼容模式下的IE 通過查詢文檔的根節(jié)點(diǎn)(document.documentElement)
怪異模式下的IE 通過查詢文檔的<body>元素(document.body)
document.compatMode
之前很少接觸document.compatMode，在這里再學(xué)習(xí)一下
我們都知道，IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對于盒模型的解釋和其他的標(biāo)準(zhǔn)瀏覽器是一樣，但在Quirks Mode模式下則有很大差別。
在不聲明Doctype的情況下，IE默認(rèn)又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當(dāng)前的文檔渲染方式。
document.compatMode正好派上用場，它有兩種可能的返回值：
BackCompat Standards-compliant mode is not switched on. (Quirks Mode) CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
官方解釋：
BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉。
CSS1Compat：標(biāo)準(zhǔn)兼容模式開啟。
document.compatMode用來判斷當(dāng)前瀏覽器采用的渲染方式。
當(dāng)document.compatMode等于BackCompat時，瀏覽器客戶區(qū)寬度是document.body.clientWidth；
當(dāng)document.compatMode等于CSS1Compat時，瀏覽器客戶區(qū)寬度是document.documentElement.clientWidth。
高度、滾動條高度、滾動條的Left、滾動條的Top等等都是上面的情況。
參考文章：http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html
