HTML元素坐標(biāo)定位

1、HTML元素坐標(biāo)定位，這些知識點得掌握文檔坐標(biāo)和視口坐標(biāo)視口坐標(biāo)是相對于窗口的坐標(biāo)，而文檔坐標(biāo)是相對于整個文檔而言。例如，在文檔坐標(biāo)中如果一個元素的相對于文檔的Y坐標(biāo)是200px，并且用戶已經(jīng)把瀏覽器向下滾動了75px，那么視口坐標(biāo)中元素的Y坐標(biāo)為200px 75px = 125px。如何獲取瀏覽器滾動條的位置?Window對象的pageXOffset和pageYOffset屬性在所有瀏覽器中提供這些值，除IE8以及更早的版本。IE和所有現(xiàn)代瀏覽器也可以通過scrollLeft和scrollTop屬性獲取滾動條位置。下面代碼的getScrollOffsets方法獲取滾動條位置：01/以一個對象

2、的x和y屬性放回滾動條的位置02functiongetScrollOffsets(w)03w = w | window;04/除了IE 8以及更早的版本以外，其他瀏覽器都支持05if(w.pageXOffset != null)returnx: w.pageXOffset, y: w.pageYOffset;06/對標(biāo)準(zhǔn)模式下的IE07vard = w.document;08if(patMode =CSS1Compat)09returnx: d.documentElement.scrollLeft, y: d.documentElement.scrollTop;10/對怪異模式下的瀏覽器11r

3、eturn x: d.body.scrollLeft, y: d.body.scrollTop;12有時候能夠判定視口的尺寸也是非常有用的，下面的代碼簡便地查詢視口尺寸：01/作為一個對象的w和h屬性返回視口的尺寸02functiongetViewportSize(w)03/使用指定的窗口， 如果不帶參數(shù)則使用當(dāng)前窗口04w = w | window;0506/除了IE8及更早的版本以外，其他瀏覽器都能用07if(w.innerWidth != null)08returnw: w.innerWidth, h: w.innerHeight;0910/對標(biāo)準(zhǔn)模式下的IE（或任意瀏覽器）11vard

4、 = w.document;12if(patMode =CSS1Compat)13returnw: d.documentElement.clientWidth, h: d.documentElement.clientHeight;1415/對怪異模式下的瀏覽器16returnw: d.body.clientWidth, h: d.body.clientHeight;17上面的兩個例子已經(jīng)使用到scrollLeft、scrollTop、clientWidth、clientHeight。 scrollLeft和scrollTop獲取滾動條位置，而clientWidth和clientHeight獲取

5、對象的尺寸。查詢元素的幾何尺寸判定一個元素的尺寸和位置最簡單的方法是調(diào)用它的getBoundingClientRect()方法。該方法是在IE5中引入的，而現(xiàn)在當(dāng)前的所有瀏覽器都實現(xiàn)了。它不需要參數(shù)，返回left、right、top、bottom屬性的對象。這個方法返回元素在視口坐標(biāo)中的位置。為了轉(zhuǎn)換為甚至用戶滾動瀏覽器窗口以后任然有效的文檔坐標(biāo)，需要加上滾動偏移量：1/元素相對于文檔的坐標(biāo)位置2functiongetElementRect(e)3varbox = e.getBoundingClientRect();4varoffsets = getScrollOffsets();5varx

6、= box.left + offsets.x;6vary = box.top + offsets.y;78returnx:x, y: y;9在很多瀏覽器中，getBoundingClientRect()返回的對象還包括width和height屬性。但在原始的IE中未實現(xiàn)?？梢赃@樣計算元素的width和height：1/元素尺寸2functiongetElementSize(e)3varbox = getElementRect(e);4varw = box.width | box.right - box.left;5varh = box.height | box.bottom - box.top

7、;67returnw: w, h: h;8滾動元素之前的getScrollOffsets方法可以查詢滾動條的位置。該例子的scrollLeft和scrollTop屬性可以用來設(shè)置讓瀏覽器滾動，但有一種更簡單的方法從Javascript最早時期開始支持的。Window對象的scrollTop()方法接口一個點的X和Y坐標(biāo)(文檔坐標(biāo))，并作為滾動條的偏移量設(shè)置它們。下面代碼滾動瀏覽器到文檔最下面的頁面可見：1/滾動到瀏覽器最底部2functionscrollToBottom()3/獲取文檔和視口的高度4vardocumentHeight = document.documentElement.off

8、setHeight;5varviewportHeight = window.innerHeight;/或使用上面的getViewPortSize()方法67/然后，滾動讓最后一頁在視口中可見8window.scrollTo(0, documentHeight - viewportHeight);9Window的scrollBy方法和scroll()和scrollTo()類似，但是它的參數(shù)是相對的，并在當(dāng)前滾動條的偏移量上增加。例如，快速閱讀者可能會喜歡這樣：1javascript:void setInterval(function()scrollBy(0, 10), 200);如果想讓某個元素

9、在文檔中可見，可以利用getBoundingClientRect()計算元素的位置，并轉(zhuǎn)換為文檔坐標(biāo)，然后使用scrollTo()方法達(dá)到目的。但在需要顯示Html元素上調(diào)用scrollIntoView()方法更方便。scrollIntoView()的行為與設(shè)置window.location.hash為一個命名錨點的名字后瀏覽器產(chǎn)生的行為類似。元素尺寸、位置和溢出任何HTML元素的只讀屬性offsetWidth和offsetHeight以CSS像素返回它的屏幕尺寸。返回的尺寸包含元素的邊框和內(nèi)邊距，除去了外邊距。所有HTML元素?fù)碛衞ffsetLeft和offsetTop屬性來返回元素的X和Y

10、坐標(biāo)。這些值是文檔坐標(biāo)，并直接指定元素的位置。當(dāng)對于已定位元素的后代元素和一些其他元素，這些屬性返回的坐標(biāo)是相對于祖先元素的而非文檔。offsetParent屬性指定這些屬性所相對的父元素。如果offsetParent為null，這些屬性都是文檔坐標(biāo)，因此，一般來說，用offsetLeft和offsetTop來計算元素e的位置需要一個循環(huán)：01/計算元素位置02functiongetElementPosition(e)03varx = 0, y = 0;04while(e != null)05x += e.offsetLeft;06y += e.offsetTop;07e = e.offset

11、Parent;080910returnx: x, y: y ;11getElementPosition函數(shù)也不總是計算正確的值，下面看如何修復(fù)它。除了這些名字以offset開頭的屬性以外，所有的文檔元素定義了其他兩組屬性，名字一組以client開頭，另一組以scroll開頭。即每個元素都有以下這些屬性：offsetWidthclientWidthscrollWidthoffsetHeightclientHeightcrollHeightoffsetLeftclientLeftscrollLeftoffsetTopclientTopscrollTopoffsetParent為了理解client和

12、scroll屬性，你需要知道元素的實際內(nèi)容可能比分配用來容納的盒子更大，因此單個元素可能有滾動條。內(nèi)容區(qū)域是視口，就像瀏覽器窗口，當(dāng)實際內(nèi)容比視口大，需要把元素滾動套位置考慮進去。clientWidth和clientHeight類似offsetWidth和offsetHeight，區(qū)別在于它們不包含邊框大小。只包含內(nèi)容和內(nèi)邊距。同時，如果瀏覽器在內(nèi)邊距和邊框之間添加了滾動條，clientWidth和clientHeight不包含滾動條尺寸。在文檔的根元素上查詢這些屬性時，它們的返回值和窗口的innerWidth和innerHeight屬性值相等。clientLeft和clientTop屬性沒什

13、么用：它們返回元素的內(nèi)邊距的外邊框和它的邊框的外邊緣之間的水平距離和垂直距離。scrollWidth和scrollHeight是元素的內(nèi)容區(qū)域加上它的內(nèi)邊距再加上任何溢出內(nèi)容的尺寸。當(dāng)內(nèi)容正好和內(nèi)容區(qū)域匹配沒溢出時，這些屬性與clientWidth和clientHeight相等。有溢出時，包含了溢出的內(nèi)容尺寸。scollLeft和scrollTop指定元素滾動條的位置。在getScrollOffsets()方法中查詢過它們。注意，scrollLeft和scrollTop是可寫的，通過設(shè)置它們來讓元素中的內(nèi)容滾動(HTML元素并沒有類似Window對象的scrollTo()方法。DEMO下面代碼

14、介紹了前面幾個函數(shù)的使用：001002003004005Title006007/以一個對象的x和y屬性放回滾動條的位置008functiongetScrollOffsets(w)009w = w | window;010/除了IE 8以及更早的版本以外，其他瀏覽器都支持011if(w.pageXOffset != null)returnx: w.pageXOffset, y: w.pageYOffset;012/對標(biāo)準(zhǔn)模式下的IE013vard = w.document;014if(patMode =CSS1Compat)015returnx: d.documentElement.scroll

15、Left, y: d.documentElement.scrollTop;016/對冠以模式下的瀏覽器017return x: d.body.scrollLeft, y: d.body.scrollTop;018019020/作為一個對象的w和h屬性返回視口的尺寸021functiongetViewportSize(w)022/使用指定的窗口， 如果不帶參數(shù)則使用當(dāng)前窗口023w = w | window;024025/除了IE8及更早的版本以外，其他瀏覽器都能用026if(w.innerWidth != null)027returnw: w.innerWidth, h: w.innerHei

16、ght;028029/對標(biāo)準(zhǔn)模式下的IE（或任意瀏覽器）030vard = w.document;031if(patMode =CSS1Compat)032returnw: d.documentElement.clientWidth, h: d.documentElement.clientHeight;033034/對怪異模式下的瀏覽器035returnw: d.body.clientWidth, h: d.body.clientHeight;036037038/元素相對于文檔的坐標(biāo)位置039functiongetElementRect(e)040varbox = e.getBoundingC

17、lientRect();041varoffsets = getScrollOffsets();042varx = box.left + offsets.x;043vary = box.top + offsets.y;044045returnx:x, y: y;046047048/元素尺寸049functiongetElementSize(e)050varbox = getElementRect(e);051varw = box.width | box.right - box.left;052varh = box.height | box.bottom - box.top;053054retur

18、nw: w, h: h;055056057/滾動到瀏覽器最底部058functionscrollToBottom()059/獲取文檔和視口的高度060vardocumentHeight = document.documentElement.offsetHeight;061varviewportHeight = window.innerHeight;/或使用上面的getViewPortSize()方法062063/然后，滾動讓最后一頁在視口中可見064window.scrollTo(0, documentHeight - viewportHeight);065066067/計算元素位置068functiongetElementPosition(e)069varx = 0, y = 0;070while(e != null)071x += e.offsetLeft;072y += e.offsetTop;073e = e.offsetParen