一：文檔坐標和視口坐標

　　在頂級窗口和標簽頁中，“視口”只是實際顯示文檔內容的瀏覽器的一部分：它不包括瀏覽器的“外殼（如菜單，工具條和標簽頁）。針對框架頁中顯示的文檔，視口只是定義了框架頁的《iframe》”

　　如果文檔比視口小，或者說他還未出現滾動，則文檔的左上角就是視口的左上角，文檔和視口坐標系統就是同一個。但是，一般來說，要在兩種坐標之間互相轉換，必須加上或減去滾動的偏移量（scroll offset）。

　　例如，在文檔坐標中如果一個元素的Y坐標是200px，並且用戶已經把瀏覽器向下滾動75px；那麽視口坐標中元素的Y坐標就是275px。文檔坐標比視口坐標更加基礎，並且在用戶滾動中不會發生變化。

二：查詢元素的幾何尺寸

　　判定一個元素的尺寸和位置最簡單的辦法就是調用它的getBoundingClientRectangle（）方法。他不需要參數，返回一個有left，right，top和bottom的屬性。

var obox = document.getElementById("box");
var arr = obox.getBoundingClientRect();
console.log(arr.width)/*200*/

三：總結

    var obox = document.getElementById("box");
    /*除了IE8及更早的版本外，其他的瀏覽器都可以用
 
*/
    pageXOffset;
    pageYOffset;
    /*標準模式下的IE，任何瀏覽器*/
    document.documentElement.scrollLeft;
    document.documentElement.scrollTop;
    /*滾動條的位置*/
    document.documentElement.offsetHeight;
    document.documentElement.offsetWidth;
    /*元素的尺寸,以CSS像素返回它的屏幕尺寸，返回的尺寸包含元素的邊框和內邊距，出去了外邊距*/
    obox.offsetWidth;
    obox.offsetHeight;
    
 
/*元素的位置，返回x和y坐標*/
    obox.offsetLeft;
    obox.offsetTop;
    /*元素的尺寸，不包含邊框大小，至包含內容和它的內邊距。*/
    obox.clientWidth;
    obox.clientHeight;

文檔的幾何形狀和滾動