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

271c0580650e1297284eeac9c6592f81_0928300.gif

event.clientX刊橘、event.clientY

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

event.pageX浓冒、event.pageY

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

event.offsetX感昼、event.offsetY

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

event.screenX、event.screenY

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

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

obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算上側(cè)位置,整型宵溅,單位像素。
obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置雏搂,整型,單位像素凸郑。
obj.offsetWidth 指 obj 控件自身的絕對寬度,不包括因 overflow 而未顯示的部分芙沥,也就是其實際占據(jù)的寬度浊吏,整型而昨,單位像素卿捎。
obj.offsetHeight 指 obj 控件自身的絕對高度,不包括因 overflow 而未顯示的部分午阵,也就是其實際占據(jù)的高度享扔,整型植袍,單位像素惧眠。

我們對前面提到的 offsetParent 作個說明于个。

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

以上屬性在 FireFox 中也有效档押。

另外:我們這里所說的是指 HTML 控件的屬性值,并不是 document.body叼耙,document.body 的值在不同瀏覽器中有不同解釋(實際上大多數(shù)環(huán)境是由于對 document.body 解釋不同造成的,并不是由于對 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

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

offsetHeight

IE讼呢、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實際高度键思,可以小于 clientHeight。

scrollHeight

IE吼鳞、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實際高度,可以小于 clientHeight赔桌。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度音诫,不過最小值是 clientHeight雪位。

簡單地說

clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度竭钝。
NS雹洗、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度,只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時庇茫,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight旦签。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動條加邊框顷霹。scrollHeight 則是網(wǎng)頁內(nèi)容實際高度。

同理

clientWidth淋淀、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可炭臭。

說明

以上基于 DTD HTML 4.01 Transitional袍辞,如果是 DTD XHTML 1.0 Transitional 則意義又會不同鞋仍,在 XHTML 中這三個值都是同一個值搅吁,都表示內(nèi)容的實際高度。新版本的瀏覽器大多支持根據(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)容可能不會完全顯示吸申。</div>  
</div>  
<script type="text/javascript">  
var p = document.getElementById("p");  
p.scrollTop = 10;  
</script>  

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

scrollLeft 也是類似道理。

我們已經(jīng)知道 offsetHeight 是自身元素的寬度瓷翻,而 scrollHeight 是內(nèi)部元素的絕對寬度,包含內(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:

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

2.clientLeft,clientTop:

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

3.scrollLeft,scrollTop:

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

4.scrollHeight,scrollWidth:

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

5.style.left:

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

6.style.pixelLeft:

返回定位元素左邊界偏移量的整數(shù)像素值.因為屬性的非像素值返回的是包含單位的字符串,例如,30px. 利用這個屬性可以單獨處理以像素為單位的數(shù)值.

7.style:posLetf:

返回定位元素左邊界偏移量的數(shù)量值,不管相應(yīng)的樣式表元素指定什么單位.因為屬性的非位置值返回的是包含單位的字符串,例如,1.2em

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

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

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

scrollWidth 是對象的實際內(nèi)容的寬赃份,不包邊線寬度,會隨對象中內(nèi)容的多少改變(內(nèi)容多了可能會改變對象的實際寬度)抓韩。

clientWidth 是對象可見的寬度鬓长,不包滾動條等邊線,會隨窗口的顯示大小改變痢士。

offsetWidth 是對象的可見寬度茂装,包滾動條等邊線,會隨窗口的顯示大小改變少态。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市嫌佑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌屋摇,老刑警劉巖幽邓,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異牵舵,居然都是意外死亡倦挂,警方通過查閱死者的電腦和手機担巩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來犯戏,“玉大人,你說我怎么就攤上這事笛丙。” “怎么了胚鸯?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵笨鸡,是天一觀的道長。 經(jīng)常有香客問我形耗,道長,這世上最難降的妖魔是什么激涤? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任倦踢,我火速辦了婚禮送滞,結(jié)果婚禮上辱挥,老公的妹妹穿的比我還像新娘。我一直安慰自己晤碘,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布宠蚂。 她就那樣靜靜地躺著腮介,像睡著了一般肥矢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上旅东,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天十艾,我揣著相機與錄音,去河邊找鬼忘嫉。 笑死,一個胖子當(dāng)著我的面吹牛庆冕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播访递,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼惭载!你這毒婦竟也來了响巢?” 一聲冷哼從身側(cè)響起描滔,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤踪古,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后茎芋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年铡原,在試婚紗的時候發(fā)現(xiàn)自己被綠了商叹。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片燕刻。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡剖笙,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出过蹂,到底是詐尸還是另有隱情十绑,我是刑警寧澤酷勺,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站甚亭,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏亏狰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一暇唾、第九天 我趴在偏房一處隱蔽的房頂上張望啰挪。 院中可真熱鬧,春花似錦亡呵、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽汁胆。三九已至,卻和暖如春誉尖,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背铡恕。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工丢间, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留探熔,地道東北人烘挫。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像其垄,于是被迫代替她去往敵國和親苛蒲。 傳聞我的和親對象是個殘疾皇子捉捅,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容