getBoundingClientRect()兼容性处理
getBoundingClientRect()
这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0,IE为2
document.documentElement.clientLeft; // 非IE为0,IE为2
function GetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top, //如果是IE7以下那么 结果为 ‘2 - 2’。 不是为IE的话 结果是 ‘ 0 - 0 ’; 不管哪种方式,结果最终就是0
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
最新文章
- 解决Visual Studio 2010/2012的RC4011 warnings
- WEB前端开发和调试的工具
- (转) 实时SLAM的未来及与深度学习的比较
- 一个简单的flask程序
- 一:python入门
- 【BZOJ3930】选数(莫比乌斯反演,杜教筛)
- .NET运行时中的监测和可观测性
- Java高级特性 第8节 网络编程技术
- ELK日志分析平台搭建
- javascript运行机制之执行顺序详解
- Ubuntu下更改Python版本
- Mac+Docker环境下xdebug的配置
- 【一】jquery之subline编辑器插件安装
- CouldnotcreatetheJavaVirtualMachine/1709
- “医疗信息化行业之中的联发科”- 我们在医疗行业中的定位及目标 想做一个面对中小企业的专业上游软件供应商 台湾联发科技颠覆掉的是一个封闭的手机产业系统 解决方案,即AgileHIS.NET数字化医院基础方案
- 2-16 MySQL字段约束-索引-外键
- Python 中 (&;,|)和(and,or)之间的区别
- F5后端nginx+tomcat应用如何获得用户的真实ip【转】
- Activity基本跳转
- Android代码调试报错