getBoundingClientRect用于获取某个元素相对于视窗的位置集合。

1.语法:这个方法没有参数。

rectObject = object.getBoundingClientRect()

2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素为单位。

 rectObject.top:元素上边到视窗上边的距离;

 rectObject.right:元素右边到视窗左边的距离;

 rectObject.bottom:元素下边到视窗上边的距离;

 rectObject.left:元素左边到视窗左边的距离;

rectObject.width: 元素宽度(ie9+),(ie6-8, rectObject.right - rectObject.left)

rectObject.height: 元素高度(ie9+),(ie6-8, rectObject.bottom - rectObject.top)

3. 兼容性ie6以上全支持

4. ie7-的left和top会多出两个像素

解决方法:

var rectLeft = rectObject.left - document.documentElement.clientLeft || 2;
rectRight = rectObject.right - document.documentElement.clientLeft || 2;
rectBottom = rectObject.bottom - document.documentElement.clientTop || 2;
rectTop = rectObject.top - document.documentElement.clientTop || 2;

参考:http://www.cnblogs.com/Songyc/p/4458570.html

getBoundingClientRect说明的更多相关文章

  1. 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

    offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...

  2. JavaScript中getBoundingClientRect()方法详解

    获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...

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

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

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

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

  5. CSSOM之getboundingclientrect和getclientrects

    TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...

  6. getBoundingClientRect在IE9/10里的bug

    getBoundingClientRect可以获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,最早在IE中实现,后其它浏览器均已实现. 但它在IE9,10中有个bug,当出现垂直滚动条时, ...

  7. getBoundingClientRect详解

    getBoundingClientRect获取的left和top始终是该元素相对于页面原点坐标的位置,当它大于原点坐标则为正数,等于原点坐标为零,小于为负数.

  8. getBoundingClientRect() 来获取页面元素的位置

    getBoundingClientRect() 来获取页面元素的位置   document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...

  9. getBoundingClientRect()兼容性处理

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

  10. .getBoundingClientRect()

    .getBoundingClientRect() 该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有4个属性:top,left,right, ...

随机推荐

  1. hdparm - 获取/设置硬盘参数

    总览 hdparm [ -a [扇区数] ] [ -A [0|1] ] [ -c [芯片组模式] ] [ -C ] [ -d [0|1] ] [ -f ] [ -g ] [ -i ] [ -k [0| ...

  2. C-基础:形参char *&p与char *p

    char* &p:以引用传递的方式传指针char* p: 以值传递的方式传指针

  3. Linux学习日记:第二天

    今天学习vi编辑命令: root@ubuntu:vi hello.java 使用到的命令: 插入命令: a 和 i:在当前光标前或后插入文本(A 和 I 分别在当前行行末或行首插入文本):  o 和  ...

  4. mysql 主从数据校验

    使用工具pt-table-checksum: /usr/bin/pt-table-checksum --user=root --password='mysqlpass' --host=127.0.0. ...

  5. LVS-nat模式-原理介绍

    集群,为解决某个特定问题将多台计算机组合起来形成的单个系统 lvs-nat: 本质是多目标IP的DNAT,通过将请求报文中的目标地址和目标端口修改为某挑出的RS的RIP和PORT实现转发 lvs集群类 ...

  6. 李涛ps高手之路

    下载地址:http://www.ly89.cn/detailR/21.html

  7. Scala学习-01-变量与类型

    Scala运行在jvm之上,可以调用Java类库和与Java框架交互,并将面向对象与面向函数结合在一起. 特点: 1 保留了静态类型检查.安全保障高. 2 函数式编程,更加灵活. 3 运行于jvm之上 ...

  8. webdriver高级应用- 操作富文本框

    富文本框的技术实现和普通的文本框的定位存在较大的区别,富文本框的常见技术用到了Frame标签,并且在Frame里面实现了一个完整的HTML网页结构,所以使用普通的定位模式将无法直接定位到富文本框对象. ...

  9. python week08 并发编程之多进程--实践部分

    一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...

  10. Policy-Based Reinforcement Learning

    Policy-based Approach policy-based 强化学习通常是要学习一个actor, actor可以用\(\pi_\theta (S)\) 来确定.如果我们用actor来玩游戏, ...