1.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了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

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


<!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;

2.要获取当前页面的滚动条纵坐标位置，用：
      document.documentElement.scrollTop
而不是
     document.body.scrollTop
documentElement 对应的是 html 标签，而 body 对应的是 body 标签。
在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替.
如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop
,如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候，请加上这样的判断  
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
   top  = document.body.scrollTop;
   left = document.body.scrollleft; 
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
   top  =  document.documentElement.scrollTop;
   left =  document.documentElement.scrollLeft; 
}

页面元素的定位：getBoundingClientRect()和document.documentElement.scrollTop的更多相关文章

  1. sellenium页面元素的定位方法

    1.findElements函数可用于多个元素定位 (1)使用ID定位:driver.findElement(By.id("ID值")); 例:HTML代码: 定位语句代码:Web ...

  2. Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 <上>

    前置步骤: 上一篇的Python单元测试框架unittest,我认为相当于功能测试测试用例设计中的用例模板,在自动化用例的设计过程中,可以封装一个模板,在新建用例的时候,把需要测试的步骤添加上去即可: ...

  3. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  4. document.body.scrollTop or document.documentElement.scrollTop

      用Javascript获取DOM节点相对于页面的绝对坐标时,需要计算当前页面的滚动距离,而这个值的获取又取决于浏览器. 在Firefox或Chrome浏览器的控制台可以查看document.bod ...

  5. document.documentElement.scrollTop(获取滚动条位置)

    要获取当前页面的滚动条纵坐标位置,用:document.documentElement.scrollTop;而不是:document.body.scrollTop;documentElement 对应 ...

  6. document.documentElement.scrollTop

    要获取当前页面的滚动条纵坐标位置, 用:      document.documentElement.scrollTop; 而不是:      document.body.scrollTop; doc ...

  7. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  8. document.body.scrollTop与document.documentElement.scrollTop兼容

    这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声 ...

  9. js中的document.body.scrollTop与document.documentElement.scrollTop

    获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop获取当前页面滚动条横坐标的位置:document.b ...

随机推荐

  1. 2019-03-28 SQL inner left full

    在使用 join 时,on 和 where 条件的区别如下: 1. on 条件是在生成临时表时使用的条件,它不管 on 中的条件是否为真,都会返回左边表中的记录. 2.where 条件是在临时表生成好 ...

  2. Github+Jekyll 搭建个人网站详细教程

    GitHub搭建个人网站,大家在网上一搜能搜到一大把的教程,但是大部分都讲的差不多,并不能满足自己想搭建的网站详细需求.我之前在搭建本站的时候也是查了较多资料,学习了下jekyll语法,参考了几个主题 ...

  3. ActiveMQ 整合 spring

    一.添加 jar 包 <dependency> <groupId>org.apache.activemq</groupId> <artifactId>a ...

  4. smartctl----硬盘状态监控

    smartmontools介绍 smartmontools是一款开源的磁盘控制,监视工具,可以运行在Linux,Unix,BSD,Solaris,Mac OS,OS/2,Cygwin和Windows上 ...

  5. ASP.NET CORE--WIN10上无法单步调试解决方法

    参考这篇文章 http://www.cnblogs.com/artech/p/debug-in-vs-code.html In order to be able to debug cross-plat ...

  6. Android漫游记(6)---APP启动之旅（I）

    Android基于Linux2.6+内核,我们看一张图,以对Android系统的架构有个感性的认识. 我们从Kernel层简单说明: 1.Kernel层:基于Linux2.6+内核.同一时候做了一些嵌 ...

  7. Hit 2255 Not Fibonacci

    今天下午刚起来眼睛就比較涨,,并且还有点恶心,唉.结果一直不在状态.并且这个题太坑了.. .. 点击此处即可传送 Hit 2255 Maybe ACMers of HIT are always fon ...

  8. hdu 5335 Walk Out (2015 Multi-University Training Contest 4)

    Walk Out                                                                         Time Limit: 2000/10 ...

  9. 6 Javascript:函数

    函数 函数是面向任务的. 当我们面临一个须要可问题的时候.往往无处下手.这时候.须要将问题分解为多个任务,从而逐一击破. 这里就须要函数的帮助. 语法 function Name() { Body() ...

  10. Spring Batch(4): Job详解

    Spring Batch(4): Job详解 2016-03-26 18:46 870人阅读 评论(1) 收藏 举报  分类: Spring(6)  版权声明:本文为博主原创文章,未经博主允许不得转载 ...