首页 > 代码库 > getBoundingClientRect的快速理解
getBoundingClientRect的快速理解
getBoundingClinetRect: 获取某一个元素相对视窗的位置集合(它是一个方法,返回一个对象集合)
位置集合主要包括 { top, left, right,bottom } 等属性
用法: Obeject.getBoundingClinetRect() (这里的Obeject代表的想要获取该元素的位置集合的DOM元素)
eg: var pos = Obeject.getBoundingClinetRect()
var left = pos.left // 获取该元素左边相对屏幕左边的位置
var right = pos.right// 获取该元素右边相对屏幕左边的位置
var bottom = pos.bottom// 获取该元素下边相对上边屏幕的位置
var top= pos.top// 获取该元素上边相对屏幕上边的位置
兼容性问题: 在低版本IE浏览器中会多出2px
兼容性写法:
eg: var pos = Obeject.getBoundingClinetRect()
var htmlLeft = document.documentElement.clientLeft
var htmlTop = document.documentElement.clientTop
var left = pos.left - htmlLeft // 获取该元素左边相对屏幕左边的位置
var right = pos.right - htmlLeft // 获取该元素右边相对屏幕左边的位置
var bottom = pos.bottom - htmlTop // 获取该元素下边相对屏幕上边的位置
var top= pos.top - htmlTop // 获取该元素上边相对屏幕上边的位置
因为现代浏览器中document.documentElement.clientTop 和 document.documentElement.clientLeft 都为0,
在低版本浏览器中 document.documentElement.clientTop 和 document.documentElement.clientLeft 都为2px
所以很好的解决了兼容性问题
getBoundingClientRect的快速理解