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