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 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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
我的论坛源代码(九)
2006/10/09 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
javascript模块化简单解析
2016/04/07 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
基于ssm框架实现layui分页效果
2019/07/27 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
孝老爱亲模范事迹
2014/01/24 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
师德师风整改措施
2014/10/24 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
初一英语教学反思
2016/02/15 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书