getBoundingClientRect()方法
是在《javascript高级程序设计》中看到了这个方法。getBoundingClientRect在IE5中就有,但似乎不怎么引起我们注意。
返回值:它返回一个clientRect对象,在实现中是TextRectangle对象,包含了元素相对于视口的信息。
标准 和 IE9及以上:clientRect对象包含left 、right、 top 、bottom、 width 和 height这6个属性。
IE8及以下(IE5及以上):clientRect对象包含left 、right、 top 、bottom这4个属性。
值得我们注意的是IE中元素的getBoundingClientRect返回值top和left值可能会存在一定的偏移量。
比如在IE7中,不管是documentElement还是普通元素,它存在一个2的偏移量。而在IE8中,documentElement存在一个-2的偏移量,标准中则都为0;
document.documentElement.getBoundingClientRect().left;// IE8 -2 ,IE7 2,标准 0
document.getElementsByTagName('div')[0].getBoundingClientRect().left;// IE8 0 ,IE7 2,标准 0
兼容的getBoundingClientRect()方法:
getBoundingClientRect()方法的更多相关文章
- getBoundingClientRect方法获取元素在页面中的相对位置
获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...
- JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...
- 利用getBoundingClientRect方法实现简洁的sticky组件
补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...
- 聊聊 getClientRects 和 getBoundingClientRect 方法
开始表演 今天来聊一下两个相似的方法,它们就是:getBoundingClientRect().getClientRects(). 只见它们俩手拉手地登上了舞台,一个鞠躬,便开始滔滔不绝起来. 自述 ...
- JavaScript中的getBoundingClientRect()方法
这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. getBoundClientRect()方法返回的对象中和CSS中所定义不 ...
- 【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 获取元素位置信息:getBoundingClientRect
一个神奇的方法. 一.历史 偷个懒,上个传送门:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二.介绍 DOM元素方法,返回一 ...
- 获取鼠标点击相对于Canva位置的2种方法
如果给Canvas添加 onmousedown事件,获取到的鼠标位置都是相对于当前文档的位置(x,y):
- javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置
来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...
随机推荐
- C#+Entity Frame work+MVC+Mysql+Apicloud共享汽车管理系统【论文】+Apicloud开发实例
摘要: 共享汽车管理系统主要分为后台管理PC端和手机App端,后台管理可以对指定停车点.车辆基本信息.用户注册信息.用户订单信息.推送消息进行管理和维护,而手机app用户可以通过手机号进行短信注册,根 ...
- Hibernate 4 升级到 5 后显示未知实体错误
提示的错误信息如下: org.hibernate.MappingException: Unknown entity: com.ossez.reoc.common.crm.DoNotCall at or ...
- Hibernate 4 升级到 Hibernate 5 的时候 SessionFactory 不能使用
在 Hibernate 4 升级到 5 的时候老的 sessionFactory 出现错误. public static SessionFactory initSession() { Configur ...
- Python回归分析五部曲(三)—一元非线性回归
(一)基础铺垫 一元非线性回归分析(Univariate Nonlinear Regression) 在回归分析中,只包括一个自变量和一个因变量,且二者的关系可用一条曲线近似表示,则称为一元非线性回归 ...
- Rhel7.4系统部署cobbler
cobbler安装 一.系统信息: [root@openstack ~]# cat /etc/redhat-release Red Hat Enterprise Linux Server releas ...
- PAT L2-001 紧急救援 —— (多参数最短路)
和天梯中的直捣黄龙差不多.但是,通过这个问题,我对多参数最短路又有了更深一层的了解. 这题因为点数比较多,所以如果直接用大力学长的在G上dfs找最短路径的条数的话,会TLE,所以需要剪枝.剪枝方法是, ...
- 1.3 JAVA规范以及基础语法(if条件和循环)
一.规范以及运算符 1.命名规则 类名大驼峰规则方法名.变量名小驼峰原则常量大写.下划线分开见名释义.不与关键字冲突 关键字链接:https://www.runoob.com/java/java-ba ...
- nodejs豆瓣爬虫
从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...
- django 快速实现注册(四)
一.创建项目与应用 #创建项目fnngj@fnngj-H24X:~/djpy$ django-admin.py startproject mysite3fnngj@fnngj-H24X:~/djpy ...
- centos7下面ruby的升级
背景 在做redis集群时,所需要的使用ruby工具进行操作,发现在线安装的Ruby版本过低,redis支持的版本最少为2.2.2. 在线安装ruby 使用yum在线安装ruby,安装的版本为2.0. ...