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

}

}

getBoundingClientRect()兼容性处理的更多相关文章

  1. [转] getBoundingClientRect判断元素是否可见

    getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视 ...

  2. JS中关于位置和尺寸的api

    HTMLElement.offsetParent 由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大.off ...

  3. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  4. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  5. 利用getBoundingClientRect方法实现简洁的sticky组件

    补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...

  6. 获取元素位置信息:getBoundingClientRect

    一个神奇的方法. 一.历史 偷个懒,上个传送门:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二.介绍 DOM元素方法,返回一 ...

  7. getBoundingClientRect的用法

    getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObject = ...

  8. getBoundingClientRect方法获取元素在页面中的相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...

  9. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

随机推荐

  1. BestCoder Round #65 hdu5590(水题)

    ZYB's Biology Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  2. Object类、instanceof

    一.Object 1.所有类都默认继承至Object 2.两个常用的方法 2.1.toString:返回类的字符串描述,一般子类会重写用来打印属性 2.2.equals:默认比较两个对象的引用是否相同 ...

  3. myeclipse内存配置

    配置文件路径:D:\work\myeclipse\MyEclipse for Spring 10\myeclipseforspring.ini 替换以下内容即可 -vmargs-Xmx768m-XX: ...

  4. AppServ 配置还是成功了

    安装就不说了,一键式安装,还不错. 首先,登陆密码吧,用户是root ,密码是空: 之前创建的databases都还在, 可以用phpmyadmin管理,不在输入复杂的命令了, 方便,继续鼓捣php.

  5. 解决安装SQL Server2008失败的问题

    安装SQL Server2008时遇到"2008安装错误  必须重新启动计算机才能安装 SQL Server". 解决办法:HKEY_LOCAL_MACHINE\SYSTEM\Cu ...

  6. [前端JS学习笔记]JavaScript function

    一.函数的声明 1.1 function 命令 function methodName(params) { // code } 如下声明: function test_function(params) ...

  7. foxpro常用命令

    Visual FoxPro原名FoxBase,最初是由美国Fox Software公司于1988年推出的数据库产品,在DOS上运行,与xBase系列兼容.FoxPro是FoxBase的加强版,最高版本 ...

  8. Cocos2d-x——CocosBuilder官方帮助文档翻译3 动画

    Working with Animations 动画 You can use CocosBuilder for creating character animations, animating com ...

  9. 在 SUSE 11 sp2 上安装 freeradius

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  10. VM中ubuntu已经正确配置了静态IP仍无法上网

    情况描述:正确配置了ubuntu的IP,getway,DNS..无法ping通getway. 环境:宿主机:win7 32Bit  虚拟机:ununtu 10.04  VM:9.0.1 build-8 ...