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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
PHP中几个常用的魔术常量
2012/02/23 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
js获得鼠标的坐标值的方法
2013/03/13 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
JS实现图片切换特效
2019/12/23 Javascript
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python如何使用腾讯云发送短信
2020/09/17 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
拾金不昧锦旗标语
2014/06/27 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
银行贷款委托书范本
2014/10/11 职场文书
小学运动会宣传稿
2015/07/23 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android