getBoundingClientRect獲取元素位置?

getBoundingClientRect用于獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗的位置。

?

?

getBoundingClientRect()最先是IE的私有屬性，現(xiàn)在已經(jīng)是一個(gè)W3C標(biāo)準(zhǔn)。所以你不用當(dāng)心瀏覽器兼容問題，不過(guò)還是有區(qū)別的：IE只返回top,lef,right,bottom四個(gè)值，不夠可以通過(guò)以下方法來(lái)獲取width,height的值：

??? var ro = object.getBoundingClientRect();
??? var Width = ro.right - ro.left;
??? var Height = ro.bottom - ro.top;

兼容所有瀏覽器寫法：

??? var ro = object.getBoundingClientRect();
??? var Top = ro.top;
??? var Bottom = ro.bottom;
??? var Left = ro.left;
??? var Right = ro.right;
??? var Width = ro.width||Right - Left;
??? var Height = ro.height||Bottom - Top;

有了這個(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/CyLee/p/6729619.html

總結(jié)

以上是生活随笔為你收集整理的javascript 温故而知新 getBoundingClientRect的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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