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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
腾讯的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操作类
2006/11/16 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
python获得图片base64编码示例
2014/01/16 Python
开始着手第一个Django项目
2015/07/15 Python
python实现实时监控文件的方法
2016/08/26 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python实现的特征提取操作示例
2018/12/03 Python
python实现简单猜单词游戏
2020/12/24 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
公司庆典活动邀请函
2014/01/09 职场文书
媒体宣传策划方案
2014/05/25 职场文书
大学生求职信例文
2014/06/29 职场文书
整改通知书
2015/04/20 职场文书
计算机教师工作总结
2015/08/13 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
python​格式化字符串
2022/04/20 Python
python获取带有返回值的多线程
2022/05/02 Python