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屬性。