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

}

转载于:https://www.cnblogs.com/web-alibaba/p/4571905.html

getBoundingClientRect()兼容性处理相关推荐

[转] getBoundingClientRect判断元素是否可见
getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视 ...
前端学习——17——获取窗口属性，dom尺寸，让滚动条滚动
一:查看滚动条的滚动距离 1:window.pageXOffset 2:window.pageYOffest (IE8及IE8以下不兼容) <!DOCTYPE html> <html ...
DOM初探（16）——查看元素的集合尺寸
三:DOM基本操作: 查看元素的集合尺寸 domEle.getBoundingClientRect(); 兼容性很好改方法返回一个对象,对象里面有left,top,right,bottom等属性.l ...
【JavaScript 笔记】基础内容
文章目录 JavaScript 特点 1.浏览器组成 2.JavaScript - 解释型语言,单线程,也叫ECMAscript(ES) 3.js有三个部分 4.js执行队列,轮转时间片(类似吃饭) ...
JavaScript note
1.浏览器 IE--trident Chrome--webkit / blink Firefox--gecko Opera--presto Safari--webkit 2.数据类型 a. 原始值: ...
登峰造极的Javascript
文章目录 switch case 条件判断语句数组对象 typeof操作符显式类型转换隐式类型转换函数参数作用域作用域链闭包立即执行函数对象,包装类包装类原型.原型链原型链 ...
JavaScript yyds
JavaScript yyds JavaScript历史主流浏览器及其内核 JavaScript中的数据类型 typeof函数特殊情况显示类型转换隐式类型转换函数命名函数声明匿名函数表达 ...
JavaScript DOM学习笔记
DOM(Document Object Model) dom提供了操作html和xml的机会,他是一个操作html和xml功能的一类对象的集合 DOM的基本操作 document代表整个文档 Node ...
9_js 日期对象Date()、js定时器、获取窗口属性、获取dom尺寸、脚本化css
日期对象Date() 封装函数,打印当前是何年何月何日何时,几分几秒直接看w3c上的介绍吧 https://www.w3school.com.cn/js/jsref_obj_date.asp js定 ...
尚硅谷_HTML5 核心实战笔记
目录序 offsetParent & offsetLeft & offsetTop 获取绝对位置和相对位置自定义的函数 getBoundingClientRect offsetWi ...

getBoundingClientRect()兼容性处理

getBoundingClientRect()兼容性处理相关推荐

最新文章

热门文章