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. 新手指南:详解Linux Top 命令

    Linux top命令简介 top 命令是最流行的性能监视工具之一,我们必需了解.它是一个优秀的交互式工具,用于监视性能.它提供系统整体性能,但报告进程信息才是 top 命令的长处.top 命令交互界 ...

  2. Light oj 1234 - Harmonic Number

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1234 给你一个数n,让你求 这个要是直接算的话肯定TLE,要是用1e8的数组预处理存储 ...

  3. HDU 5832 A water problem (水题,大数)

    题意:给定一个大数,问你取模73 和 137是不是都是0. 析:没什么可说的,先用char 存储下来,再一位一位的算就好了. 代码如下: #pragma comment(linker, "/ ...

  4. HDU 4463 Outlets (最小生成树)

    题意:给定n个点坐标,并且两个点已经连接,但是其他的都没有连接,但是要找出一条最短的路走过所有的点,并且路线最短. 析:这个想仔细想想,就是应该是最小生成树,把所有两点都可以连接的当作边,然后按最小生 ...

  5. c# 实现IComparable、IComparer接口、Comparer类的详解

    在默认情况下,对象的Equals(object o)方法(基类Object提供),是比较两个对象变量是否引用同一对象.我们要必须我自己的对象,必须自己定义对象比较方式.IComparable和ICom ...

  6. struts2文件下载 出现Can not find a java.io.InputStream with the name的错误

    成功代码: 前台界面jsp: <a style="text-decoration:none;" href="<%=path %>/main/frontN ...

  7. 超级终端和SecureCRT进行Console口的连接

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

  8. c# 自己制作一个简单的项目倒计时器

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. Linux设备模型分析之kset(基于3.10.1内核)

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 内核版本:3.10.1   一.kset结构定义 kset结构体定义在include/linux/kobject.h ...

  10. delphi 插入 HTML代码 播放器

    Delphi在Webbrowser中插入 HTML/java script代码 使用方法将下面的代码赋值到1个记事本里保存,然后保存为xxx.htm就可以看到效果使用PasteHtml实现功能 的事件 ...