網頁與瀏覽器窗口の真理

參考資料

首先，網頁大小與瀏覽器窗口大小歷來都不是一回事！！！這尼瑪最近才明白，坑~

因此，要知道如下常:

網頁的範圍
咱們在代碼裏面設置的CSS或者js腳本，改變的樣式就是網頁範圍下的改變，也就是說，咱們設置的CSS大小是網頁的不是瀏覽器窗口的大小。

瀏覽器窗口
瀏覽器窗口中看到的那部分實時動態的網頁面積，又叫作viewport（視口）。

爲何說是實時動態的窗口？
好比，我上班時偷偷的新窗口打開淘寶，而後把窗口調的很小，這樣老大就不會發覺拉。這樣一來，原本全屏的窗口變成了小窗口，所以瀏覽器的窗口大小也就被改變了。

在不出現各類滾動條的狀況下，viewport的大小和網頁的大小是相同的。

獲取網頁的大小的方法1

clientHeight和clientWidth屬性。這兩個屬性指元素的內容部分再加上padding的所佔據的視覺面積，不包括border和滾動條佔用的空間。
獲取body的這兩個屬性，能夠得出網頁的大小。

盜個圖說明一下：

再盜個代碼

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

注意事項

1. 這個函數必須在頁面加載完成後才能運行，不然document對象還沒生成，瀏覽器會報錯。

2. 大多數狀況下，都是document.documentElement.clientWidth返回正確值。可是，在IE6的quirks模式中，document.body.clientWidth返回正確的值，所以函數中加入了對文檔模式的判斷。

3. clientWidth和clientHeight都是隻讀屬性，不能對它們賦值。

獲取網頁的大小的方法2

document對象的scrollHeight和scrollWidth屬性就是網頁的大小，意思就是滾動條滾過的全部長度和寬度。

function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math.max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document.body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　　　document.body.clientHeight)
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　　document.documentElement.clientWidth),
　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}

元素的絕對位置

詳見參考資料裏面的函數

網頁元素的相對位置

詳見參考資料裏面的函數

獲取元素位置的快速方法

getBoundingClientRect():返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對於瀏覽器窗口（viewport）左上角的距離。

　　var X= this.getBoundingClientRect().left;
　　var Y =this.getBoundingClientRect().top;

再加上滾動距離，就能夠獲得絕對位置

　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。