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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
jquery remove方法应用详解
Nov 22 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php中计算时间差的几种方法
2009/12/31 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
客户端静态页面玩分页
2006/06/26 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
Python 解析XML文件
2009/04/15 Python
Python实现简单多线程任务队列
2016/02/27 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python 提取文件指定列的方法示例
2019/08/07 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
主要负责人任命书
2014/06/06 职场文书
六年级数学教学反思
2016/02/16 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技