js中方法的作用及兼容方案详解

1、getBoundingClientRect的作用

方法用于获取某个超文本标记语言元素相对于视窗的位置集合。

执行对象。getboundingclientrect()；会得到元素的顶部、右侧、底部、左侧、宽度、高度属性，这些属性以一个对象的方式返回。

getBoundingClientRect()

这个方法返回一个矩形对象，包含四个属性：左、上、右和底部。分别表示元素各边与页面上边和左边的距离。

var box=文档。getelementbyid(' box ')；//获取元素警报(框。getboundingclientrect().顶部);//元素上边距离页面上边的距离警报(框。getboundingclientrect().右);//元素右边距离页面左边的距离警报(框。getboundingclientrect().底部);//元素下边距离页面上边的距离警报(框。getboundingclientrect().左);//元素左边距离页面左边的距离2.getBoundingClientRect上下左右属性值解释

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

看图：

3.浏览器兼容性

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

IE67的左侧、顶部会少2px，并且没有宽度、高度属性。

4、利用方法来写一个获取超文本标记语言元素相对于视窗的位置集合的方法

div id=' test ' style=' width : 100px；高度： 100像素；背景# ddd'/divscript函数getObjXy(obj){ var xy=obj。getboundingclientrect()；var top=xy。顶层文件。文档元素。客户端顶部文档。文档元素。向上滚动，//文档。文档元素。客户端顶部在IE67中始终为2,其他高级点的浏览器为0底部=xy .底部，左侧=xy。左文档。文档元素。客户留下了文件。文档元素。向左滚动，//文档。文档元素。客户离开在IE67中始终为2,其他高级点的浏览器为0 right=xy.right，width=xy.width||right - left，//IE67不存在宽度使用右-左获得高度=xy.height | |底部-顶部；返回{ top:top，right:right，bottom:bottom，left:left，width:width，height : height } } var test=GetObjxy(文档。getelementbyid(' test ')；alert('top:' test.top '，right:' test.right '，bottom:' test.bottom '，left : ' test。左)；/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。