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. Python-OpenCV中的filter2D()函数

    使用自定义内核对图像进行卷积.该功能将任意线性滤波器应用于图像.支持就地操作.当光圈部分位于图像外部时,该功能会根据指定的边框模式插入异常像素值. 语法 函数原型: dst=cv.filter2D(s ...

  2. ABNF语法

    http典型的请求场景 来自极客时间课件 http协议介绍 . [c:\~]$ telnet www.taohui.pub 80 Host 'www.taohui.pub' resolved to 1 ...

  3. nfs-ganesha使用

    一 nfs-ganesha在centos7上安装 yum -y install centos-release-gluster yum install -y nfs-ganesha.x86_64yum ...

  4. JavaScript深入浅出第2课:函数是一等公民是什么意思呢?

    摘要: 听起来很炫酷的一等公民是啥? <JavaScript深入浅出>系列: JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼? JavaScript深入浅出第2课:函 ...

  5. Python语言编写脚本时,对日期控件的处理方式

    对日期控件,日期控件的输入控一般是不能手动输入的:把readonly属性去掉就好 其实很简单,我们不去搞时间日期空间,我们把它当成一个普通的input框处理就好了! 但是,很多此类型input框都是禁 ...

  6. virtualvenv+django+uWSGI+nginx 部署 踩坑记录

    原创博文 转载请注明出处! uwsgi: unrecognized option '--http:8089' uwsgi: unrecognized option '--http' uwsgi trk ...

  7. Laravel中chunk组块结果集处理

    如果你需要处理成千上万个 Eloquent 结果,可以使用 chunk 命令.chunk 方法会获取一个“组块”的 Eloquent 模型,并将其填充到给定闭包进行处理.使用 chunk 方法能够在处 ...

  8. 12.Yii2.0框架视图模版继承与模版相互调用

    目录 模板渲染的两种方式 加载视图 index.php 和 about.php 页面 建立控制器HomeController php 新建模板 home\index.php 新建模板home\abou ...

  9. 有关Kali更新问题的解决方法。

    近期更新源遭遇诸多不顺,无非是各种依赖问题的报错夹杂着各种稀奇古怪的问题,不过既然是玩Linux,就要做好处理各种疑难杂症的准备.经过了这几天的不断尝试,今天终于解决了更新出错的问题. 本人更新源出现 ...

  10. pycharm-install scipy

    懒得装双系统,所以在win7下用pycharm,python2.7 虽然机子本身是64位,但是安装包的时候,我居然需要下载32位的??迷:) 这次装的是scipy.在pycharm里添加不了,根据网上 ...