getBoundingClientRect说明
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说明的更多相关文章
- 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释
offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...
- JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- 利用getBoundingClientRect方法实现简洁的sticky组件
补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...
- CSSOM之getboundingclientrect和getclientrects
TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...
- getBoundingClientRect在IE9/10里的bug
getBoundingClientRect可以获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,最早在IE中实现,后其它浏览器均已实现. 但它在IE9,10中有个bug,当出现垂直滚动条时, ...
- getBoundingClientRect详解
getBoundingClientRect获取的left和top始终是该元素相对于页面原点坐标的位置,当它大于原点坐标则为正数,等于原点坐标为零,小于为负数.
- getBoundingClientRect() 来获取页面元素的位置
getBoundingClientRect() 来获取页面元素的位置 document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...
- getBoundingClientRect()兼容性处理
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
- .getBoundingClientRect()
.getBoundingClientRect() 该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有4个属性:top,left,right, ...
随机推荐
- Python-OpenCV中的filter2D()函数
使用自定义内核对图像进行卷积.该功能将任意线性滤波器应用于图像.支持就地操作.当光圈部分位于图像外部时,该功能会根据指定的边框模式插入异常像素值. 语法 函数原型: dst=cv.filter2D(s ...
- ABNF语法
http典型的请求场景 来自极客时间课件 http协议介绍 . [c:\~]$ telnet www.taohui.pub 80 Host 'www.taohui.pub' resolved to 1 ...
- nfs-ganesha使用
一 nfs-ganesha在centos7上安装 yum -y install centos-release-gluster yum install -y nfs-ganesha.x86_64yum ...
- JavaScript深入浅出第2课:函数是一等公民是什么意思呢?
摘要: 听起来很炫酷的一等公民是啥? <JavaScript深入浅出>系列: JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼? JavaScript深入浅出第2课:函 ...
- Python语言编写脚本时,对日期控件的处理方式
对日期控件,日期控件的输入控一般是不能手动输入的:把readonly属性去掉就好 其实很简单,我们不去搞时间日期空间,我们把它当成一个普通的input框处理就好了! 但是,很多此类型input框都是禁 ...
- virtualvenv+django+uWSGI+nginx 部署 踩坑记录
原创博文 转载请注明出处! uwsgi: unrecognized option '--http:8089' uwsgi: unrecognized option '--http' uwsgi trk ...
- Laravel中chunk组块结果集处理
如果你需要处理成千上万个 Eloquent 结果,可以使用 chunk 命令.chunk 方法会获取一个“组块”的 Eloquent 模型,并将其填充到给定闭包进行处理.使用 chunk 方法能够在处 ...
- 12.Yii2.0框架视图模版继承与模版相互调用
目录 模板渲染的两种方式 加载视图 index.php 和 about.php 页面 建立控制器HomeController php 新建模板 home\index.php 新建模板home\abou ...
- 有关Kali更新问题的解决方法。
近期更新源遭遇诸多不顺,无非是各种依赖问题的报错夹杂着各种稀奇古怪的问题,不过既然是玩Linux,就要做好处理各种疑难杂症的准备.经过了这几天的不断尝试,今天终于解决了更新出错的问题. 本人更新源出现 ...
- pycharm-install scipy
懒得装双系统,所以在win7下用pycharm,python2.7 虽然机子本身是64位,但是安装包的时候,我居然需要下载32位的??迷:) 这次装的是scipy.在pycharm里添加不了,根据网上 ...