博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[转载]getBoundClientRect函数详解
阅读量:5960 次
发布时间:2019-06-19

本文共 1023 字,大约阅读时间需要 3 分钟。

原文:

一、定义

    getBoundingClientRect 函数是W3C组织在第一版本的草案中确定的一个标准方法,在此之前,只有IE浏览器是支持该方法的,W3C在这次草案中把它扶正成为标准,足可以看出它并不简单。getBoundingClientRect 方法返回的是调用该方法的元素的对象,该对象具有top、left、right、bottom四个属性,分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角(注意,不是文档区域的左上角)的偏移像素值。

 

二、兼容性

    getBoundingClientRect方法最先在IE5中出现,后来被W3C接纳成为标准。目前IE5.5+、Firefox 3.5+、Chrome 4+、Safari 4.0+、Opara 10.10+等浏览器均支持该方法,兼容性几乎完美。

    在具体表现方面,Firefox6以前的版本使用getBoundingClientRect时不能获取到top和bottom这两个属性值,Firefox6及以后的版本和其他支持getBoundingClientRect方法的浏览器则top、left、right、bottom四个属性值均能获取到。需要说明的是由于某些版本的IE浏览器的<html>文档根元素默认是有2px边框的,所以这里需要特别处理一下,微软上说在IE5中会存在这样的情况,但据我实际测试,xp系统中IE6也存在这样的问题,奇怪的是,我在win7环境下用IETester测试的IE各版本都是正常的。但这并不是什么大问题,我们只要把得到的值减去html根元素(body也可考虑进来)的clientLeft或clientTop就能保持各浏览器一致啦。

 

三、用途

     当getBoundingClientRect刚被w3c列为标准的时候,还曾,因为已经存在类似的方法来获取元素的偏移位置,比如offsetLeft和offsetTop。但Jquery的作者马上阐明了。用传统的方法固然可以实现getBoundingClientRect同样的功能,但兼容各种浏览器以及各种不同的元素就会把你弄死,而且效率还非常低下。所以获取页面上某个元素相对于浏览器窗口的偏移量就成了getBoundingClientRect的用武之地了。而获取元素的偏移量能有什么用,我相信,你懂的~ ^_^

转载于:https://www.cnblogs.com/driftsky/p/3487279.html

你可能感兴趣的文章
通过IP判断登录地址
查看>>
Oracle闪回技术
查看>>
利用单壁路由实现vlan间路由
查看>>
hello world
查看>>
CentOS 7 配置yum本地base源和阿里云epel源
查看>>
python 学习导图
查看>>
生成树
查看>>
深入浅出JavaScript (五) 详解Document.write()方法
查看>>
用XSLT和XML改进Struts
查看>>
Beta冲刺——day6
查看>>
Comet OJ - Contest #3 题解
查看>>
[网络流24题-9]试题库问题
查看>>
jquery选择器详解
查看>>
C# 保留2位小数
查看>>
使用xshell远程连接Linux
查看>>
杭电ACM1007
查看>>
faster-RCNN台标检测
查看>>
Unix环境高级编程 centos中配置apue编译环境
查看>>
运算符
查看>>
数据结构之各排序算法
查看>>