javascript 获取元素位置的快速方法 getBoundingClientRect()

143 阅读 0 评论 95 点赞

我是靠谱客的博主糟糕夏天，最近开发中收集的这篇文章主要介绍javascript 获取元素位置的快速方法 getBoundingClientRect()，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。
所以，网页元素的相对位置就是
　　var X= this.getBoundingClientRect().left;
　　var Y =this.getBoundingClientRect().top;
再加上滚动距离，就可以得到绝对位置
　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前，IE、Firefox 3.0+、Opera 9.5+都支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。