快捷導(dǎo)航

JavaScript CSS修改學(xué)習(xí)第一章查找位置

更新時(shí)間：2010年02月19日 14:02:39 作者：

在這一章我會(huì)給出查找頁(yè)面上的元素位置的代碼。他能幫助你找到真正的位置，假如你改變了窗口的尺寸，然后再次運(yùn)行代碼，也會(huì)告訴你新的位置。

offset
在所有的瀏覽器里面元素的offsetTop和offsetLeft兩個(gè)屬性都是很有用的。他們會(huì)給出你元素相對(duì)于父元素的坐標(biāo)位置。

這段代碼會(huì)向上查找offsetParent，然后添加offsetTop和offsetLeft。最終無(wú)論offsetParent在哪，他都會(huì)給出你元素在屏幕上的真正坐標(biāo)。

解釋
這段代碼非常簡(jiǎn)單。先傳入要計(jì)算的元素，然后設(shè)置變量curleft和curtop為0。

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

 function findPos(obj) { 
var curleft = curtop = 0; 

如果瀏覽器支持offsetParent：

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

if (obj.offsetParent) {

每次我們找到一個(gè)新的對(duì)象的時(shí)候，把他的offsetTop和offsetLeft加到curtop和curleft上：

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

 do { 
curleft += obj.offsetLeft; 
curtop += obj.offsetTop; 

小技巧：返回'='的值
下面就是這個(gè)技巧：

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

} while (obj = obj.offsetParent);

這個(gè)不是表達(dá)式錯(cuò)誤。我不想用'=='來(lái)比較obj和obj.offsetParent（那也沒(méi)有用，因?yàn)橐粋€(gè)元素肯定和他的父元素不相等）。

所以我用'='來(lái)把obj.offsetParent的值傳遞給obj。在這里我對(duì)這個(gè)技巧有詳細(xì)的解釋。

簡(jiǎn)單的返回
這個(gè)循環(huán)會(huì)當(dāng)元素沒(méi)有了offsetParent的時(shí)候結(jié)束。當(dāng)offsetParent存在的時(shí)候，就依然會(huì)把offsetLeft加到curleft上，把offsetTop加到curtop上。

當(dāng)循環(huán)技術(shù)的時(shí)候，我們就把坐標(biāo)返回給調(diào)用這個(gè)函數(shù)的程序。

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

return [curleft,curtop];}

翻譯地址：http://www.quirksmode.org/js/findpos.html

轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)