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


Posted in Javascript onNovember 25, 2010

document.documentElement.getBoundingClientRect

下面这是MSDN的解释:

Syntax

oRect = object.getBoundingClientRect()

Return Value

Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.

Remarks

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.


 

还是实际解释下,该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。也不好理解,下面用图说明下。

该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

 

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

 

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

 

下面的代码举了个简单的例子,可以滚动滚动条之后点红色区域看各个值的变化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Demo</title> 
</head> <body style="width:2000px; height:1000px;"> 
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div> 
</body> 
</html> 
<script> 
document.getElementById('demo').onclick=function (){ 
if (document.documentElement.getBoundingClientRect) { 
alert("left:"+this.getBoundingClientRect().left) 
alert("top:"+this.getBoundingClientRect().top) 
alert("right:"+this.getBoundingClientRect().right) 
alert("bottom:"+this.getBoundingClientRect().bottom) 
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; 
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop; 
alert("Demo的位置是X:"+X+";Y:"+Y) 
} 
} 
</script>

有了这个方法,获取页面元素的位置就简单多了,

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

Javascript 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
详解Puppeteer 入门教程
May 09 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 #Javascript
js删除所有的cookie的代码
Nov 25 #Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 #Javascript
js页面跳转常用的几种方式
Nov 25 #Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 #Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 #Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 #Javascript
You might like
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Python实现全角半角字符互转的方法
2016/11/28 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
英语道歉信范文
2014/01/09 职场文书
旅游网创业计划书
2014/01/31 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
职业女性的职业规划
2014/03/04 职场文书
海飞丝广告词
2014/03/20 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
租房协议书样本
2014/08/20 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
汽车销售员工作总结
2015/08/12 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python