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 相关文章推荐
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
js获取视频时长代码
Apr 10 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
javascript history对象详解
Feb 09 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Vue微信公众号网页分享的示例代码
May 28 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
js实现点赞效果
2020/03/16 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
六年级学生评语
2014/04/22 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技