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 相关文章推荐
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
Boostrap入门准备之border box
May 09 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
详解datagrid使用方法(重要)
Nov 06 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
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
angularjs基础教程
2014/12/25 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
js友好的时间返回函数
2016/08/24 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
如何在python中实现随机选择
2019/11/02 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
公司优秀员工获奖感言
2014/08/14 职场文书
委托书怎样写
2014/08/30 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
正确的理解和使用Django信号(Signals)
2021/04/14 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
在python中读取和写入CSV文件详情
2022/06/28 Python