getBoundingClientRect介紹

getBoundingClientRect獲取元素位置

getBoundingClientRect用于獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。getBoundingClientRect是DOM元素到瀏覽器可視范圍的距離（不包含文檔卷起的部分）。

該函數返回一個Object對象，該對象有6個屬性：top,lef,right,bottom,width,height；這里的top、left和css中的理解很相似，width、height是元素自身的寬高，但是right，bottom和css中的理解有點不一樣。right是指元素右邊界距窗口最左邊的距離，bottom是指元素下邊界距窗口最上面的距離。

getBoundingClientRect()最先是IE的私有屬性，現在已經是一個W3C標準。所以你不用當心瀏覽器兼容問題，不過還是有區別的：IE只返回top,lef,right,bottom四個值，不過可以通過以下方法來獲取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; //有了這個方法，獲取頁面元素的位置就簡單多了: var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

getBoundingClientRect判斷元素是否在可視區域

以前的辦法是通過各種offset判斷元素是否可見，網上很多教程，大家可以自己去查找。?getBoundingClientRect是獲取可視區域相關位置信息的，使用這個屬性來判斷更加方便：

function isElementInViewport (el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ ); }

getBoundingClientRect兼容性

目前來說兼容性還是不錯的，但是使用前還是查看一下caniuse比較好。

轉載于:https://www.cnblogs.com/chris-oil/p/9670106.html

總結

以上是生活随笔為你收集整理的[转] getBoundingClientRect判断元素是否可见的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。