一天一個js（4）擷取螢幕、文檔、捲軸等高寬

前面是js，後面是jquery

網頁可見地區寬 document.body.clientWidth 網頁可見地區高 document.body.clientHeight
網頁可見地區寬 相容模式@(1) 網頁可見地區高 相容模式@(2)
網頁本文全文寬 document.body.scrollWidth 網頁本文全文高 document.body.scrollHeight
網頁被捲去的高 document.body.scrollTop 網頁被捲去的左 document.body.scrollLeft
網頁本文部分上 window.screenTop 網頁本文部分左 window.screenLeft
螢幕解析度的高 window.screen.height 螢幕解析度的寬 window.screen.width
螢幕可用工作區高度 window.screen.availHeight 螢幕可用工作區寬度 window.screen.availWidth
相容模式：

(1).(window.innerWidth)?window.innerWidth:(document.documentElement&&document.documentElement.clientWidth)?document.documentElement.clientWidth:document.body.offsetWidth;

(2).(window.innerHeight)?window.innerHeight:(document.documentElement&&document.documentElement.clientHeight)?document.documentElement.clientHeight:document.body.offsetHeight;

 

scrollHeight: 擷取對象的滾動高度。

scrollLeft:設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離

scrollTop:設定或擷取位於對象最頂端和視窗中可見內容的最頂端之間的距離

scrollWidth:擷取對象的滾動寬度

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+： IE5.0/5.5：
clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

 

 

在jQuery中擷取瀏覽器及頁面的長度與寬度主要用到以下幾個代碼：

 

$(window).height() 瀏覽器時下視窗可視地區高度
$(document).height() 瀏覽器時下視窗文檔的高度 (不隨瀏覽器視窗變化而變化)
$(document.body).height() 瀏覽器時下視窗文檔body的高度
$(document.body).outerHeight(true) 瀏覽器時下視窗文檔body的總高度 包括border padding margin
$(window).width() 瀏覽器時下視窗可視地區寬度
$(document).width() 瀏覽器時下視窗文檔對於象寬度
$(document.body).width() 瀏覽器時下視窗文檔body的高度
$(document.body).outerWidth(true) 瀏覽器時下視窗文檔body的高度
$(document).scrollTop() 網頁被捲去的高
$(document).scrollLeft() 網頁被捲去的寬