javascript定位

1、定位定位元素尺寸元素尺寸獲取元素尺寸可以使用下面幾種方式?元素的style屬性width，height，但這些屬性往往返回空值，因?yàn)樗鼈冎荒芊祷厥褂眯袃?nèi)style屬性定義在元素上的樣式?元素的currentStyle屬性width，height（IE），getComputedStyle(objnull)返回對(duì)象的width，height，這樣可以獲取元素的實(shí)際CSS定義的寬度和高度，但當(dāng)元素沒(méi)有使用CSS定義外觀時(shí)，雖然元素仍然有大小（

2、只要其中有字符或其它元素），這些屬性的返回值是不確定的，如IE返回auto而火狐則返回一個(gè)看似理想的值。?對(duì)象的clientWidth和clientHeight屬性給出元素的可視部分的寬度和高度當(dāng)有滾動(dòng)條時(shí)，只返回可見(jiàn)區(qū)域大小對(duì)于塊級(jí)元素將返回元素的所設(shè)置的寬度和高度加上填充(padding)，這一點(diǎn)幾乎所有瀏覽器都達(dá)成一致.但當(dāng)塊級(jí)元素并沒(méi)有設(shè)置寬和高以及填充時(shí)就出現(xiàn)不同了谷歌瀏覽器和火狐瀏覽器的報(bào)告一致IE報(bào)告都為0而Opera則有

3、所偏差.再將這兩個(gè)屬性應(yīng)用到行內(nèi)元素上IE和火狐都報(bào)告為0谷歌報(bào)告了一個(gè)看似理想的數(shù)字而Opera竟會(huì)一個(gè)為正另一個(gè)負(fù)!?對(duì)象的offsetWidth和offsetHeight屬性用來(lái)取得對(duì)象在頁(yè)面中的實(shí)際所占區(qū)域大小(所設(shè)置的寬高加邊框加填充，當(dāng)有滾動(dòng)條時(shí)還會(huì)算上滾動(dòng)條)似乎這個(gè)屬性對(duì)于設(shè)置了寬和高的塊級(jí)元素幾乎沒(méi)有什么瀏覽器兼容問(wèn)題但不得不說(shuō)的是火狐的一個(gè)BUG.火狐瀏覽器有個(gè)可將頁(yè)面放大縮小的功能當(dāng)將頁(yè)面縮小后對(duì)象的offsetW

4、idth和offsetHeight屬性會(huì)發(fā)生細(xì)微的變化變小幾像素!盡管這對(duì)JS編程來(lái)講幾乎沒(méi)影響但似乎這個(gè)BUG也太明顯了.這兩個(gè)屬性變非總是那么讓人信任當(dāng)對(duì)象并沒(méi)設(shè)置寬高或它是一個(gè)行內(nèi)元素時(shí)它的報(bào)告就顯得相當(dāng)復(fù)雜不同瀏覽器都有自己一套標(biāo)準(zhǔn)(但是仍然可以肯定的是這兩個(gè)屬性報(bào)告的仍然是該元素占據(jù)的的空間大小只不過(guò)會(huì)因字體和空格的默認(rèn)大小不同而不同)最讓人摸不著頭腦的是Opera對(duì)于一個(gè)body的子塊級(jí)元素當(dāng)body和它自身沒(méi)設(shè)置寬高時(shí)Op

5、era報(bào)告的它的寬度相當(dāng)大6千多像素!?還有就是scrollWidth和scrollWidth了就目前來(lái)講對(duì)于一個(gè)沒(méi)有滾動(dòng)條和溢出的元素其它瀏覽器對(duì)這個(gè)屬性的報(bào)告還算有規(guī)律:對(duì)象的clientWidthbder=scrollWidth.對(duì)象的clientHeightbder=scrollHeight只有IE報(bào)告有問(wèn)題!它以元素中的內(nèi)容為準(zhǔn)如果元素內(nèi)沒(méi)有其它內(nèi)容雖然IE并不會(huì)報(bào)0但會(huì)報(bào)告一個(gè)非常小的值!再看看當(dāng)元素有滾動(dòng)條時(shí)怎么樣吧!唯一

6、值得高興的是它們對(duì)有滾動(dòng)條的元素的clientWidth和clientHeight都報(bào)告一致(但仍有一點(diǎn)要注意那就是火狐的一BUG頁(yè)面縮放功能帶來(lái)的郁悶而且這次變化非常大).而對(duì)于scrollWidth和scrollHeight真是五花八門:先說(shuō)好的盡管各不一樣但它們對(duì)scrollWidth不知為什么相差不大那么壞完全可以不做任何瀏覽器檢測(cè)w=document.documentElement.clientWidthh=document.

7、documentElement.clientHeight元素邊框?qū)挾仍剡吙驅(qū)挾全@取元素邊框?qū)挾瓤梢允褂孟旅鎺追N方式?元素style屬性的bderWidth，但同樣它只能返回使用HTML行內(nèi)style屬性定義的邊框樣式?使用currentStyle屬性或getComputedStyle方法，可以獲取元素CSS定義的實(shí)際邊框樣式，如果CSS沒(méi)有定義元素的邊框，一般的元素是沒(méi)有邊框的，但部分元素，如表單控件，仍然具有默認(rèn)的邊框?qū)挾?！?duì)于此類

8、情況，也是不能依靠這種方法來(lái)獲取元素的邊框大小的！?對(duì)象的clientLeft和clientTop屬性。不能不說(shuō)clientLeft和clientTop的名字起的太奇怪了事實(shí)上它們的名字更應(yīng)該這樣:clientBderLeftWidth和clientBderTopWidth(難道是太長(zhǎng)了的原因)更奇怪的是它們只能取得設(shè)置在元素上的左邊框和上邊框的粗細(xì)而沒(méi)有返回右邊和下邊的邊框?qū)挾鹊膶傩?另外對(duì)于文檔根元素(documentElement

9、)在IE中它有默認(rèn)的兩像素邊框?qū)挾榷渌鼮g覽器中報(bào)告為0.元素坐標(biāo)元素坐標(biāo)獲取元素坐標(biāo)方法：?元素style屬性的lefttop屬性，不但這種方法僅適用于使用HTMLstyle屬性聲明樣式的元素，并且只有當(dāng)元素使用定位（position設(shè)置為relativeabsolutefixed但不包含static）時(shí)，才會(huì)存在這些值?元素currentStyle屬性或getComputedStyle方法返回的Style對(duì)象的lefttop屬性，但

10、這種方法僅對(duì)采用定位的元素有作用?元素的offsetLeft與offsetTop屬性返回元素在頁(yè)面中相對(duì)于父元素的坐標(biāo)。一般對(duì)于進(jìn)行了定位的元素（即position為不是static的值或沒(méi)有設(shè)置），這兩個(gè)屬性的返回值為CSS中定義的元素的lefttop值，當(dāng)其自身有邊距時(shí)（margin），還會(huì)加上邊距。而對(duì)于沒(méi)有采用定位的元素則顯得比較復(fù)雜，我們只能考慮下設(shè)置了寬度和高度的塊級(jí)元素，因?yàn)闆](méi)有設(shè)置寬高，及行內(nèi)元素，沒(méi)有辦法獲取它的寬高，