首頁 > 開發者 > JavaScript
js滑鼠及對象座標控制屬性詳細解析
這篇文章主要是對js滑鼠及對象座標控制屬性進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所協助
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>
function getInfo()
{
var s = "";
s += " 網頁可見地區寬："+ document.body.clientWidth;
s += " 網頁可見地區高："+ document.body.clientHeight;
s += " 網頁可見地區寬："+ document.body.offsetWidth + " (包括邊線和捲軸的寬)";
s += " 網頁可見地區高："+ document.body.offsetHeight + " (包括邊線的寬)";
s += " 網頁本文全文寬："+ document.body.scrollWidth;
s += " 網頁本文全文高："+ document.body.scrollHeight;
s += " 網頁被捲去的高(ff)："+ document.body.scrollTop;
s += " 網頁被捲去的高(ie)："+ document.documentElement.scrollTop;
s += " 網頁被捲去的左："+ document.body.scrollLeft;
s += " 網頁本文部分上："+ window.screenTop;
s += " 網頁本文部分左："+ window.screenLeft;
s += " 螢幕解析度的高："+ window.screen.height;
s += " 螢幕解析度的寬："+ window.screen.width;
s += " 螢幕可用工作區高度："+ window.screen.availHeight;
s += " 螢幕可用工作區寬度："+ window.screen.availWidth;
s += " 你的螢幕設定是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的螢幕設定 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地測試當中：
在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的標準在作怪啊
<!DOCTYPE html PUBLIC "-//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高）
而如果沒有定義W3C的標準，則
IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
Opera為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
真是一件麻煩事情，其實就開發來看，寧可少一些對象和方法，不使用最新的標準要方便許多啊。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
