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. JavaWeb 6 Http

    6 Http 2 Http协议入门        2.1 什么是http协议                http协议: 对浏览器客户端 和  服务器端 之间数据传输的格式规范 2.2 查看http ...

  2. netbeans for php常用快捷键

    文本编辑 复制当前行到上一行/下一行ctl+shf+up 移动当前行到上一行/下一行shf+alt+left/right/down/up 删除当前行ctl+E 生成下一行shf+enter(回车) 大 ...

  3. haskell rust相关文章

    Combining Rust and Haskell http://tab.snarc.org/posts/haskell/2015-09-29-rust-with-haskell.html

  4. python把str转换为int

    def str2int(s): def fn(x,y): return x+y def char2num(s): ':9}[s] return reduce(fn,map(char2num,s)) ' ...

  5. PHP 安全相关 简单知识

    概要: 1.php一些安全配置 (1)关闭php提示错误功能 (2)关闭一些“坏功能” (3)严格配置文件权限. 2.严格的数据验证,你的用户不全是“好”人 2.1为了确保程序的安全性,健壮性,数据验 ...

  6. 【ubuntu java】java: error while loading shared libraries: libjli.so: cannot open shared object file: No such file or directory

    先检查了环境变量PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/loca ...

  7. iOS 沙盒(sandbox)机制和文件操作

    本文参看了 http://www.uml.org.cn/mobiledev/201209211.asp#1 这篇文章中的介绍,尊重原著. 1.IOS沙盒机制 IOS应用程序只能在本应用程序中创建的文件 ...

  8. spring boot学习

    window10的环境下 使用apache-maven-3.3.9 到https://github.com/spring-projects/spring-boot 下载源码包,解压到c:\spring ...

  9. jQuery.outerWidth() 函数详解

    outerWidth()函数用于设置或返回当前匹配元素的外宽度. 外宽度默认包括元素的内边距(padding).边框(border),但不包括外边距(margin)部分的宽度.你也可以指定参数为tru ...

  10. 为MySQL选择合适的备份方式

    数据库的备份是极其重要的事情.如果没有备份,遇到下列情况就会抓狂: UPDATE or DELETE whitout where… table was DROPPed accidentally… IN ...