IE與FF下javascript取得網頁及視窗大小的差異詳解_javascript技巧

在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值，下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别：

在本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。

而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight

W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如：

     
     

「提交」按鈕的 offsetTop 指「提交」按鈕距「tool」層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
「重設」按鈕的 offsetTop 指「重設」按鈕與「tool」層上邊框的距離，因為距其上邊最近的是 「tool」 層的上方邊框。

「提交」按鈕的 offsetLeft 指「提交」按鈕距「tool」層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。
「重置」按鈕的 offsetLeft 指「重置」按鈕距「提交」按鈕右邊框的距離，因為距其左邊最近的是「提交」按鈕的右邊框。

offsetTop 可以得到 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的差別是：

一、offsetTop 回傳的是數字，而 style.top 回傳的是字串，除了數字外還帶有單位：px。

二、offsetTop 只讀，而 style.top 可讀寫。

三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 傳回的是空字串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。

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 ：
clientWidth = width padding
clientHeight = height padding
offsetHeight = height padding border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
Height = height CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight皆無關)