getBoundingClientRect的快速理解

Posted 2020-09-19

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

　　所以很好的解决了兼容性问题