getBoundingClientReect的作用及兼容方案

<div id="text" style="wigth:100px ;  height:100px ; background-color:red"></div>
<script>
    function  getobjxy(obj){
            var xy = obj.getBoundingClientRect();
             var top = xy.top - document.documentElement.clientTop + document.documentElement.ScrollTop;
             var left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft
             var bottom = xy.bottom;
             var right = xy.right;
             var width = right - left ‖‖ xy.width;
              var height = bottom - top ‖‖ xy.height;
            return{
                  top:top;
                  bottom:bottom;
                  left:left;
                  right:right;
                  width:width;
                  height:height;

         }
    var text = getobjxy(document.getElementById("text"));
    alert("top:"+text.top+"bottom:"+text.bottom+"left:"+text.left+"right:"+text.right);



}        

 

1、getBoundingClientRect的作用

getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。

 

执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性，这些属性以一个对象的方式返回。

 

2.getBoundingClientRect上下左右属性值解释

主要是left和bottom要解释一下，left是指右边到页面最左边的距离，bottom是指底边到页面顶边的距离。

 3. 浏览器兼容性

ie5以上都能支持，但是又一点点地方需要修正一下，

IE67的left、top会少2px,并且没有width、height属性。