getBoundingClientRect() 来获取页面元素的位置

 
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中必须通过循环来获得元素在页面中的绝对位置。

下面的代码举了个简单的例子，可以滚动滚动条之后点红色区域看各个值的变化。

Code
<!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)
            varX=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;

from:http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html

getBoundingClientRect() 来获取页面元素的位置的更多相关文章

  1. getBoundingClientRect()来获取页面元素的位置”

    getBoundingClientRect()来获取页面元素的位置” 获取的是一个对象; 延伸阅读; https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA== ...

  2. 用getBoundingClientRect()来获取页面元素的位置

    以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0;do{_x += el.offsetLeft;_y ...

  3. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  4. js获取页面元素的位置

    一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页 ...

  5. 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

    使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...

  6. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  7. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  8. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  9. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

随机推荐

  1. Scala的Actor模式 & Akka框架

    今天学Spark的时候,看到Scala的actor模式是一个加分点.所以搜了一下,看了.主要参考下面两篇文章,还没有实验,有些地方领会的不深刻: http://nxlhero.blog.51cto.c ...

  2. UI设计基础百科

    摘自:http://www.csdn.net/article/2013-09-10/2816892-iOS-dev-tools-design 我的原型设计流程 这是一份UX原型设计流程,用来探索交互设 ...

  3. 【Linux系统】防暴力破解

    在日志文件/var/log/secure 中可以看到涉及到安全方面的日志,可以查看是否有人尝试暴力破解及是否成功,对于肉鸡行为有一定帮助 思路基本上都是加强密码的复杂度,增加iptables配置黑名单 ...

  4. FATAL ha.BootstrapStandby: Unable to fetch namespace information from active NN at ***

    This problem (Unable to fetch namespace information from active NN) occurs, because the active namen ...

  5. [Selenium] 根据预期的日期格式，获取昨天的日期

    我们不必考虑当前时间是否是本月1号,"MM/dd/yyyy"日期格式可以更改.

  6. 深入理解JVM虚拟机-2垃圾收集器

    这里讨论的收集器基于JDK 1.7 Update 14之后的HotSpot虚拟机. 如果两个收集器之间存在连线,说明可以搭配使用.虚拟机所处的区域,则表示它是属于新生代收集器还是年老代收集器.在这里我 ...

  7. Vcenter 添加域管理员权限

    授予相应管理权限

  8. iconv 文件编码相互转换

    iconv 文件编码相互转换 示例: iconv -f utf-8 -t gbk ~/a.txt > ~/b.txt -f 从哪种格式转换 -t 要转换到哪种格式 a.txt要转换的文件 b.t ...

  9. 例题：计算运费。c#语言基础，比较简单。看代码输入格式和方法。同样方法可以做一个 出租车打车的程序

    while (true) { Console.WriteLine("请输入行李重量"); double k = Convert.ToDouble(Console .ReadLine ...

  10. HTTP协议（待完善）

    注:以物流做形象类比以便更好理解HTTP协议 一.HTTP是什么? HTTP的定义 HTTP( Hypertext Transfer Protocol, 超文本传输协议) 是在万维网上进行通信时所使用 ...