offsetLeft,Left,clientLeft,clientX,pageX,screenX的區(qū)別

271c0580650e1297284eeac9c6592f81_0928300.gif

event.clientX、event.clientY

鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的X,Y坐標(biāo)(窗口坐標(biāo)),可視區(qū)域不包括工具欄和滾動(dòng)條。IE事件和標(biāo)準(zhǔn)事件都定義了這2個(gè)屬性

event.pageX、event.pageY

類似于event.clientX、event.clientY,但它們使用的是文檔坐標(biāo)而非窗口坐標(biāo)。這2個(gè)屬性不是標(biāo)準(zhǔn)屬性,但得到了廣泛支持。IE事件中沒有這2個(gè)屬性。

event.offsetX、event.offsetY

鼠標(biāo)相對(duì)于事件源元素(srcElement)的X,Y坐標(biāo)

event.screenX、event.screenY

鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的X,Y坐標(biāo)。

假設(shè) obj 為某個(gè) HTML 控件

obj.offsetTop 指 obj 相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算上側(cè)位置,整型,單位像素。
obj.offsetLeft 指 obj 相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置,整型,單位像素。
obj.offsetWidth 指 obj 控件自身的絕對(duì)寬度,不包括因 overflow 而未顯示的部分,也就是其實(shí)際占據(jù)的寬度,整型,單位像素。
obj.offsetHeight 指 obj 控件自身的絕對(duì)高度,不包括因 overflow 而未顯示的部分,也就是其實(shí)際占據(jù)的高度,整型,單位像素。

我們對(duì)前面提到的 offsetParent 作個(gè)說明。

offsetParent 獲取定義對(duì)象 offsetTop 和 offsetLeft 屬性的容器對(duì)象的引用。offsetTop 與 offsetParent 很復(fù)雜,不同瀏覽器有不同解釋,浮動(dòng)一下解釋又不同了,所以我們一般只要理解通過二者可以獲得控件在瀏覽器中的絕對(duì)位置即可。

以上屬性在 FireFox 中也有效。

另外:我們這里所說的是指 HTML 控件的屬性值,并不是 document.body,document.body 的值在不同瀏覽器中有不同解釋(實(shí)際上大多數(shù)環(huán)境是由于對(duì) document.body 解釋不同造成的,并不是由于對(duì) offset 解#釋不同造成的)

我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置,style.top 也是可以的,二者的區(qū)別是:
一、offsetTop 返回的是數(shù)字,而 style.top 返回的是字符串,除了數(shù)字外還帶有單位:px。
二、offsetTop 只讀,而 style.top 可讀寫。
三、如果沒有給 HTML 元素指定過 top 樣式,則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。

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 的解釋與上面相同,只是把高度換成寬度即可。

說明

以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 則意義又會(huì)不同,在 XHTML 中這三個(gè)值都是同一個(gè)值,都表示內(nèi)容的實(shí)際高度。新版本的瀏覽器大多支持根據(jù)頁面指定的 DOCTYPE 來啟用不同的解釋器
scrollTop 是“卷”起來的高度值,示例:

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">  
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果為 p 設(shè)置了 scrollTop,這些內(nèi)容可能不會(huì)完全顯示。</div>  
</div>  
<script type="text/javascript">  
var p = document.getElementById("p");  
p.scrollTop = 10;  
</script>  

由于為外層元素 p 設(shè)置了 scrollTop,所以內(nèi)層元素會(huì)向上卷,這卷起來的部分就是 scrollTop。

scrollLeft 也是類似道理。

我們已經(jīng)知道 offsetHeight 是自身元素的寬度,而 scrollHeight 是內(nèi)部元素的絕對(duì)寬度,包含內(nèi)部元素的隱藏的部分。上述中 p 的 scrollHeight 為 300,而 p 的 offsetHeight 為 100。

scrollWidth 也是類似道理。

IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。

1.clientHeight, clientWidth:

這兩個(gè)屬性大體上顯示了元素內(nèi)容的象素高度和寬度.理論上說這些測(cè)量不考慮任何通過樣式表加入
元素中的頁邊距,邊框等.

2.clientLeft,clientTop:

這兩個(gè)返回的是元素周圍邊框的厚度,如果不指定一個(gè)邊框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:

如果元素是可以滾動(dòng)的,可以通過這倆個(gè)屬性得到元素在水平和垂直方向上滾動(dòng)了多遠(yuǎn),單位是象素.
對(duì)于不可以滾動(dòng)的元素,這些值總是0.

4.scrollHeight,scrollWidth:

不管有多少對(duì)象在頁面上可見,他們得到的是整體.

5.style.left:

定位元素與包含它的矩形左邊界的偏移量

6.style.pixelLeft:

返回定位元素左邊界偏移量的整數(shù)像素值.因?yàn)閷傩缘姆窍袼刂捣祷氐氖前瑔挝坏淖址?例如,30px. 利用這個(gè)屬性可以單獨(dú)處理以像素為單位的數(shù)值.

7.style:posLetf:

返回定位元素左邊界偏移量的數(shù)量值,不管相應(yīng)的樣式表元素指定什么單位.因?yàn)閷傩缘姆俏恢弥捣祷氐氖前瑔挝坏淖址?例如,1.2em

top,pixelTop,posTOp這幾個(gè)類比就行了.
LEFT: 為從左向右移的位置,即掛件距離屏幕左邊緣的距離;

clientLeft 返回對(duì)象的offsetLeft屬性值和到當(dāng)前窗口左邊的真實(shí)值之間的距離

offsetLeft 返回對(duì)象相對(duì)于父級(jí)對(duì)象的布局或坐標(biāo)的left值,就是以父級(jí)對(duì)象左上角為坐標(biāo)原點(diǎn),向右和向下為X、Y軸正方向的x坐標(biāo)
pixelLeft 設(shè)置或返回對(duì)象相對(duì)于窗口左邊的位置

scrollWidth 是對(duì)象的實(shí)際內(nèi)容的寬,不包邊線寬度,會(huì)隨對(duì)象中內(nèi)容的多少改變(內(nèi)容多了可能會(huì)改變對(duì)象的實(shí)際寬度)。

clientWidth 是對(duì)象可見的寬度,不包滾動(dòng)條等邊線,會(huì)隨窗口的顯示大小改變。

offsetWidth 是對(duì)象的可見寬度,包滾動(dòng)條等邊線,會(huì)隨窗口的顯示大小改變。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容