HTML元素坐標定位

1、HTML元素坐標定位，這些知識點得掌握文檔坐標和視口坐標視口坐標是相對于窗口的坐標，而文檔坐標是相對于整個文檔而言。例如，在文檔坐標中如果一個元素的相對于文檔的Y坐標是200px，并且用戶已經(jīng)把瀏覽器向下滾動了75px，那么視口坐標中元素的Y坐標為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/對標準模式下的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ù)則使用當前窗口04w = w | window;0506/除了IE8及更早的版本以外，其他瀏覽器都能用07if(w.innerWidth != null)08returnw: w.innerWidth, h: w.innerHeight;0910/對標準模式下的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)在當前的所有瀏覽器都實現(xiàn)了。它不需要參數(shù)，返回left、right、top、bottom屬性的對象。這個方法返回元素在視口坐標中的位置。為了轉(zhuǎn)換為甚至用戶滾動瀏覽器窗口以后任然有效的文檔坐標，需要加上滾動偏移量：1/元素相對于文檔的坐標位置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屬性可以用來設置讓瀏覽器滾動，但有一種更簡單的方法從Javascript最早時期開始支持的。Window對象的scrollTop()方法接口一個點的X和Y坐標(文檔坐標)，并作為滾動條的偏移量設置它們。下面代碼滾動瀏覽器到文檔最下面的頁面可見：1/滾動到瀏覽器最底部2functionscrollToBottom()3/獲取文檔和視口的高度4vardocumentHeight = document.documentElement.off

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

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

10、坐標。這些值是文檔坐標，并直接指定元素的位置。當對于已定位元素的后代元素和一些其他元素，這些屬性返回的坐標是相對于祖先元素的而非文檔。offsetParent屬性指定這些屬性所相對的父元素。如果offsetParent為null，這些屬性都是文檔坐標，因此，一般來說，用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ù)也不總是計算正確的值，下面看如何修復它。除了這些名字以offset開頭的屬性以外，所有的文檔元素定義了其他兩組屬性，名字一組以client開頭，另一組以scroll開頭。即每個元素都有以下這些屬性：offsetWidthclientWidthscrollWidthoffsetHeightclientHeightcrollHeightoffsetLeftclientLeftscrollLeftoffsetTopclientTopscrollTopoffsetParent為了理解client和

12、scroll屬性，你需要知道元素的實際內(nèi)容可能比分配用來容納的盒子更大，因此單個元素可能有滾動條。內(nèi)容區(qū)域是視口，就像瀏覽器窗口，當實際內(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)容的尺寸。當內(nèi)容正好和內(nèi)容區(qū)域匹配沒溢出時，這些屬性與clientWidth和clientHeight相等。有溢出時，包含了溢出的內(nèi)容尺寸。scollLeft和scrollTop指定元素滾動條的位置。在getScrollOffsets()方法中查詢過它們。注意，scrollLeft和scrollTop是可寫的，通過設置它們來讓元素中的內(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/對標準模式下的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ù)則使用當前窗口023w = w | window;024025/除了IE8及更早的版本以外，其他瀏覽器都能用026if(w.innerWidth != null)027returnw: w.innerWidth, h: w.innerHei

16、ght;028029/對標準模式下的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/元素相對于文檔的坐標位置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