首页 > 代码库 > 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的快速理解