Javascript獲取獲取螢幕、瀏覽器視窗 ，瀏覽器，網頁高度、寬度的大小
螢幕可用工作區寬度：window.screen.availHeight，和瀏覽器無關，螢幕相關
螢幕可用工作區高度：window.screen.availWidth，和瀏覽器無關，螢幕相關
網頁可見區域寬：document.body.clientWidth ，html中body可視區域的寬clientWidth = width+padding，不包括滾動條，縮放後跟著變
網頁可見區域高：document.body.clientHeight ，html中body可視區域的高clientHeight = height+padding，不包括滾動條，縮放的時候跟著變
網頁可見區域寬：document.body.offsetWidth ,html中body的寬(包括邊線的寬offsetWidth = width + border + padding或者offsetWidth=clientWidth+border)
網頁可見區域高：document.body.offsetHeight ，html中body的高(包括邊線的寬offsetHeight = width + border + padding或者offsetHeight=clientHeight+border)
網頁正文全文寬：document.body.scrollWidth ，html中body的實際寬度，即物件的寬度加上可滾動寬度
網頁正文全文高：document.body.scrollHeight，html中body的實際高度，即物件的高度加上可滾動高度
網頁被捲去的高：document.body.scrollTop， html中body向下滾動過的距離
網頁被捲去的左：document.body.scrollLeft ，html中body向右滾動過的距離
網頁正文部分上：window.screenTop ，瀏覽器視窗的左上角在螢幕上的x座標，只讀屬性
網頁正文部分左：window.screenLeft ，瀏覽器視窗的左上角在螢幕上的y座標，只讀屬性
螢幕解析度的高：window.screen.height，螢幕的高，瀏覽器無關，螢幕相關
螢幕解析度的寬：window.screen.width，螢幕的寬，瀏覽器無關，螢幕相關
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight：表示元素的總高度，包括由於溢位而無法展示在網頁的不可見部分
scrollWidth：表示元素的總寬度，包括由於溢位而無法展示在網頁的不可見部分
注：(1).沒有滾動條時，scrollHeight與clientHeight屬性結果相等，scrollWidth與clientWidth屬性結果相等
(2).存在滾動條時，但元素設定寬高大於等於元素內容寬高時，scroll和client屬性的結果相等
(3).存在滾動條，但元素設定寬高小於元素內容寬高，即存在內容溢位的情況時，scroll屬性大於client屬性
scrollLeft：表示被隱藏在內容區域左側的畫素數。元素未滾動時，scrollLeft的值為0，如果元素被水平滾動了，scrollLeft的值大於0，且表示元素左側不可見內容的畫素寬度
scrollTop：表示被隱藏在內容區域上方的畫素數。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大於0，且表示元素上方不可見內容的畫素高度
offsetHeight：獲取物件相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
offsetLeft：獲取物件相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
offsetTop：獲取物件相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
event.clientX：相對文件的水平座標
event.clientY：相對文件的垂直座標
event.offsetX：相對容器的水平座標
event.offsetY：相對容器的垂直座標
document.documentElement.scrollTop：垂直方向滾動的值
event.clientX+document.documentElement.scrollTop：相對文件的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
div.style.top：相對於div所在的元件的頂部距離
要得到視窗的尺寸，對於不同的瀏覽器，需要使用不同的屬性和方法：若要檢測視窗的真實尺寸，在Netscape下需要使用Window的屬性；在 IE下需要深入Document內部對body進行檢測；在DOM環境下，若要得到視窗的尺寸，需要注意根元素的尺寸，而不是元素。
Window物件的innerWidth屬性包含當前視窗的內部寬度。Window物件的innerHeight屬性包含當前視窗的內部高度。
Document物件的body屬性對應HTML文件的標籤。Document物件的documentElement屬性則表示HTML文件的根節點。
document.body.clientHeight表示HTML文件所在視窗的當前高度。document.body. clientWidth表示HTML文件所在視窗的當前寬度。
瀏覽器大小調整事件
window.onresize=funName;//當瀏覽器大小發生變化時呼叫funName函式
getBoundingClientRect()這個方法返回一個矩形物件，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
var box=document.getElementById('box'); // 獲取元素
alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離
注意：IE、Firefox3+、Opera9.5、Chrome、Safari支援，在IE中，預設座標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個畫素，我們需要做個相容。
document.documentElement.clientTop; // 非IE為0，IE為2
document.documentElement.clientLeft; // 非IE為0，IE為2
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
分別加上外邊據、內邊距、邊框和滾動條，用於測試所有瀏覽器是否一致。