以前絕大多數(shù)的使用下面的代碼來(lái)獲取頁(yè)面元素的位置：

[code=”javascript”]var _x = 0, _y = 0;
do{
_x += el.offsetLeft;
_y += el.offsetTop;
}while(el=el.offsetParent);
return {x:_x,y:_y};[/code]

這里有個(gè)”offsetParent”問(wèn)題，所以要寫很多兼容的代碼，經(jīng)過(guò)不懈的查找終于找到getBoundingClientRect()；該方法獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗的位置，他返回的是一個(gè)對(duì)象，即Object，該對(duì)象有是個(gè)屬性：top，left，right，bottom；這里的top、left和css中的理解很相似，但是right，bottom和css中的理解有點(diǎn)不一樣，看示意圖：

以前getBoundingClientRect()是IE特有的，目前FF3+，opera9.5+，safari 4，都已經(jīng)支持這個(gè)方法。

可以滾動(dòng)滾動(dòng)條之后點(diǎn)紅色區(qū)域看各個(gè)值的變化：

?

有了這個(gè)方法，獲取頁(yè)面元素的位置就簡(jiǎn)單多了，

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

轉(zhuǎn)載于:https://www.cnblogs.com/h5monkey/p/6045912.html

總結(jié)

以上是生活随笔為你收集整理的用getBoundingClientRect()来获取页面元素的位置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。