快捷導(dǎo)航

js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性詳細(xì)解析

更新時(shí)間：2013年12月14日 10:17:39 作者：

這篇文章主要是對(duì)js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

offsetTop
獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂端位置。

offsetLeft
獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置。

offsetHeight
獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度。
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。

offsetWidth
獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度。

offsetParent
獲取定義對(duì)象 offsetTop 和 offsetLeft 屬性的容器對(duì)象的引用。

clientHeight
獲取對(duì)象的高度，不計(jì)算任何邊距、邊框、滾動(dòng)條或可能應(yīng)用到該對(duì)象的補(bǔ)白。
大家對(duì) clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度，一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域，與頁面內(nèi)容無關(guān)。

clientLeft
獲取 offsetLeft 屬性和客戶區(qū)域的實(shí)際左邊之間的距離。

clientTop
獲取 offsetTop 屬性和客戶區(qū)域的實(shí)際頂端之間的距離。

clientWidth
獲取對(duì)象的寬度，不計(jì)算任何邊距、邊框、滾動(dòng)條或可能應(yīng)用到該對(duì)象的補(bǔ)白。

SCROLL屬性

scroll
設(shè)置或獲取滾動(dòng)是否關(guān)閉。

scrollHeight
獲取對(duì)象的滾動(dòng)高度。

scrollLeft
設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離。

scrollTop
設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離。

scrollWidth
獲取對(duì)象的滾動(dòng)寬度。event屬性
x
設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于父文檔的 x 像素坐標(biāo)。

screenX
設(shè)置或獲取獲取鼠標(biāo)指針位置相對(duì)于用戶屏幕的 x 坐標(biāo)

offsetX
設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的 x 坐標(biāo)。

clientX
設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于窗口客戶區(qū)域的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動(dòng)條

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

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

clientHeight
大家對(duì) clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度，一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域，與頁面內(nèi)容無關(guān)。

offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。 NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。

scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。 NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。簡(jiǎn)單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。

NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時(shí)，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動(dòng)條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。

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

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

js獲取頁面高度

復(fù)制代碼代碼如下:

<script> 
function getInfo() 
{ 
var s = ""; 
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.clientWidth; 
s += " 網(wǎng)頁可見區(qū)域高："+ document.body.clientHeight; 
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.offsetWidth + " (包括邊線和滾動(dòng)條的寬)"; 
s += " 網(wǎng)頁可見區(qū)域高："+ document.body.offsetHeight + " (包括邊線的寬)"; 
s += " 網(wǎng)頁正文全文寬："+ document.body.scrollWidth; 
s += " 網(wǎng)頁正文全文高："+ document.body.scrollHeight; 
s += " 網(wǎng)頁被卷去的高(ff)："+ document.body.scrollTop; 
s += " 網(wǎng)頁被卷去的高(ie)："+ document.documentElement.scrollTop; 
s += " 網(wǎng)頁被卷去的左："+ document.body.scrollLeft; 
s += " 網(wǎng)頁正文部分上："+ window.screenTop; 
s += " 網(wǎng)頁正文部分左："+ window.screenLeft; 
s += " 屏幕分辨率的高："+ window.screen.height; 
s += " 屏幕分辨率的寬："+ window.screen.width; 
s += " 屏幕可用工作區(qū)高度："+ window.screen.availHeight; 
s += " 屏幕可用工作區(qū)寬度："+ window.screen.availWidth; 
s += " 你的屏幕設(shè)置是 "+ window.screen.colorDepth +" 位彩色"; 
s += " 你的屏幕設(shè)置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
//alert (s); 
} 
getInfo(); 
</script> 

在我本地測(cè)試當(dāng)中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得，很簡(jiǎn)單，很方便。
而在公司項(xiàng)目當(dāng)中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標(biāo)準(zhǔn)在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中添加這行標(biāo)記的話

在IE中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度

在FireFox中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度

在Opera中：
document.body.clientWidth ==> 可見區(qū)域?qū)挾?
document.body.clientHeight ==> 可見區(qū)域高度
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

而如果沒有定義W3C的標(biāo)準(zhǔn)，則

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

FireFox為：
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

Opera為：
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

真是一件麻煩事情，其實(shí)就開發(fā)來看，寧可少一些對(duì)象和方法，不使用最新的標(biāo)準(zhǔn)要方便許多啊。

您可能感興趣的文章: