js滑鼠及物件座標控制屬性詳細解析_javascript技巧

offsetTop
取得物件相對於版面或由 offsetParent 屬性指定的父座標的計算頂端位置。

offsetLeft
取得物件相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置。

offsetHeight
取得物件相對於版面或由父座標 offsetParent 屬性指定的父座標的高度。
IE、Opera 認為 offsetHeight = clientHeight 捲軸 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。

offsetWidth
取得物件相對於版面或由父座標 offsetParent 屬性指定的父座標的寬度。

offsetParent
取得定義物件 offsetTop 和 offsetLeft 屬性的容器物件的參考。

clientHeight
取得物件的高度，不計算任何邊距、邊框、捲軸或可能套用到該物件的補白。
大家對clientHeight 都沒有什麼異議，都認為是內容視覺區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態列以上的這個區域，與頁面內容無關。

clientLeft
取得 offsetLeft 屬性和客戶區域的實際左邊之間的距離。

clientTop
取得 offsetTop 屬性與客戶區域的實際頂端之間的距離。

clientWidth
取得物件的寬度，不會計算任何邊距、邊框、捲軸或可能套用到該物件的補白。

SCROLL屬性

scroll
設定或取得滾動是否關閉。

scrollHeight
取得物件的滾動高度。

scrollLeft
設定或取得位於物件左邊界和視窗中目前可見內容的最左端之間的距離。

scrollTop
設定或取得位於物件最頂端和視窗中可見內容的最頂端之間的距離。

scrollWidth
取得物件的滾動寬度。 event屬性
x
設定或取得滑鼠指標位置相對於父文件的 x 像素座標。

screenX
設定或取得滑鼠指標位置相對於使用者螢幕的 x 座標

offsetX
設定或取得滑鼠指標位置相對於觸發事件的物件的 x 座標。

clientX
設定或取得滑鼠指標位置相對於視窗客戶區域的 x 座標，其中客戶區域不包括視窗本身的控制項與捲軸

我們這裡說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這裡說的是 document.body，如果是 HTML 控件，則又有不同。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight
大家對clientHeight 都沒有什麼異議，都認為是內容視覺區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態列以上的這個區域，與頁面內容無關。

offsetHeight
IE、Opera 認為 offsetHeight = clientHeight 捲軸 邊框。 NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。

scrollHeight
IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小於 clientHeight。 NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。 簡單來說
clientHeight 就是透過瀏覽器看內容的這個區域高度。

NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度，只不過當網頁內容高度小於等於 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小於 clientHeight。
IE、Opera 認為 offsetHeight 是視覺區域 clientHeight 捲軸加邊框。 scrollHeight 是網頁內容實際高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。

但是
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同， xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。

js取得頁面高度

複製程式碼 程式碼如下:

<script> <BR>function getInfo() <BR>{ <BR>var s = ""; <BR>s = " 網頁可見區域寬：" document.body.clientWidth <BR>; s = " 網頁可見區域高：" document.body.clientHeight; <BR>s = " 網頁可見區域寬：" document.body.offsetWidth " (包括邊線和捲軸的寬)"; <BR>s = "網頁可見區域高：" document.body.offsetHeight " (包括邊線的寬)"; <BR>s = " 網頁正文全文寬：" document.body.scrollWidth; <BR>s = " 網頁正文全文高：" document.body.scrollHeight; <BR>s = " 網頁被捲去的高(ff)：" document.body.scrollTop; <BR>s = " 網頁被捲去的高(ie)：" document.documentElement. scrollTop; <BR>s = " 網頁被捲去的左：" document.body.scrollLeft; <BR>s = " 網頁正文部分上：" window.screenTop; <BR>s = " 網頁正文部分左：" window.screenLeft; <BR>s = " 螢幕解析度的高：" window.screen.height; <BR>s = " 螢幕解析度的寬度：" window.screen.width; <BR>s = " 螢幕可用工作區高度：" window.screen.availHeight; <BR>s = " 螢幕可用工作區寬度：" window.screen.availWidth; <BR>s = " 你的螢幕設定是" window.screen.colorDepth " 位元彩色"; <BR>s = " 你的螢幕設定" window.screen.deviceXDPI " 像素/英吋"; <BR>//alert (s); <BR>} <BR>getInfo(); <BR></ script> <BR></script>

在我本地測試當中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即
即可獲得，很簡單，很方便。
而在公司專案當中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
documentHeight
可是IE和FireFox則使用
document.documentm. >document.documentElement.clientHeight
原來是W3C的標準在作怪啊

如果在頁面中加入這行標記的話
在IE中：

document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度

document.document. => 可見區域寬度

document.documentElement.clientHeight ==> 可見區域高度
在FireFox中：

document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度

docum.document.body.clientHeight ==> BODY物件高度

docum.document.body.clientHeight ==> BODY物件高度docum.document. => 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

在Opera中：

document.body.clientWidth ==> 可見區域寬度

document.body.clientHeight ==> 可見區域高度

document.document.body.clientHeight ==>可見區域高度

document.document.body.clientWidth =. => 頁面物件寬度（即BODY物件寬度加上Margin寬） document.documentElement.clientHeight ==> 頁面物件高度（即BODY物件高度加上Margin高）
而如果沒有定義W3C的標準，則

IE為：
document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0

FireFox為：
document.documentElement.clientWidth ==> 頁面物件寬度（即BODY物件寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面物件高度（即「即」物件高度（即Margin對象高度加上Margin高）

Opera為： document.documentElement.clientWidth ==> 頁面物件寬度（即BODY物件寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面物件高度（即即BODY對象高度加上Margin高） 真是一件麻煩事情，其實就開發來看，寧可少一些物件和方法，不使用最新的標準要方便許多啊。