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 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
javascript实现密码强度显示
Mar 18 Javascript
jquery选择器简述
Aug 31 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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
分享最受欢迎的5款PHP框架
2014/11/27 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python使用scrapy解析js示例
2014/01/23 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
质检员的岗位职责
2013/11/15 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
逃课上网检讨书
2014/02/20 职场文书
个人租房协议书范本
2014/09/30 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
孝女彩金观后感
2015/06/10 职场文书
2015初中团委工作总结
2015/07/28 职场文书
宿舍管理制度范本
2015/08/07 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
java设计模式--七大原则详解
2021/07/21 Java/Android