页面元素的定位：getBoundingClientRect()和document.documentElement.scrollTop
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的更多相关文章
- sellenium页面元素的定位方法
1.findElements函数可用于多个元素定位 (1)使用ID定位:driver.findElement(By.id("ID值")); 例:HTML代码: 定位语句代码:Web ...
- Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 <上>
前置步骤: 上一篇的Python单元测试框架unittest,我认为相当于功能测试测试用例设计中的用例模板,在自动化用例的设计过程中,可以封装一个模板,在新建用例的时候,把需要测试的步骤添加上去即可: ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- document.body.scrollTop or document.documentElement.scrollTop
用Javascript获取DOM节点相对于页面的绝对坐标时,需要计算当前页面的滚动距离,而这个值的获取又取决于浏览器. 在Firefox或Chrome浏览器的控制台可以查看document.bod ...
- document.documentElement.scrollTop(获取滚动条位置)
要获取当前页面的滚动条纵坐标位置,用:document.documentElement.scrollTop;而不是:document.body.scrollTop;documentElement 对应 ...
- document.documentElement.scrollTop
要获取当前页面的滚动条纵坐标位置, 用: document.documentElement.scrollTop; 而不是: document.body.scrollTop; doc ...
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- document.body.scrollTop与document.documentElement.scrollTop兼容
这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声 ...
- js中的document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop获取当前页面滚动条横坐标的位置:document.b ...
随机推荐
- HMM隐马尔可夫模型（词语粘合）
HMM用于自然语言处理(NLP)中文分词,是用来描述一个含有隐含未知参数的马尔可夫过程,其目的是希望通过求解这些隐含的参数来进行实体识别,说简单些也就是起到词语粘合的作用. HMM隐马尔可夫模型包括: ...
- 树（6）-----DFS
1.二叉树的反向层次遍历 def levelOrderBottom1(self, root): res = [] self.dfs(root, 0, res) return res def dfs(s ...
- Project Euler 37 Truncatable primes
题意:3797有着奇特的性质.不仅它本身是一个素数,而且如果从左往右逐一截去数字,剩下的仍然都是素数:3797.797.97和7:同样地,如果从右往左逐一截去数字,剩下的也依然都是素数:3797.37 ...
- Project Euler 11 Largest product in a grid
题意:在这个20×20方阵中,四个在同一方向(从下至上.从上至下.从右至左.从左至右或者对角线)上相邻的数的乘积最大是多少? 思路:暴力去枚举以 ( x , y ) 为中心拓展的四个方向 /***** ...
- HDU2516 - 取石子游戏【斐波那契博弈】
基本描述 有一堆个数为n的石子,游戏双方轮流取石子,满足: 先手不能再第一次把所有石子取完: 之后每次可以取的石子数介于1到对手刚取的石子数的2倍之间,包括1和对手取的石子数的2倍. 取最后石子的人 ...
- BZOJ 4367 [IOI2014]holiday (决策单调DP+主席树+分治)
题目大意:略 题目传送门 神题,不写长题解简直是浪费了这道题 贪心 考虑从0节点出发的情况,显然一直往前走不回头才是最优策略 如果起点是在中间某个节点$s$,容易想到,如果既要游览$s$左边的某些景点 ...
- [luogu2585 ZJOI2006] 三色二叉树 (树形dp)
传送门 Description Input 输入文件名:TRO.IN 输入文件仅有一行,不超过500000个字符,表示一个二叉树序列. Output 输出文件名:TRO.OUT 输出文件也只有一行,包 ...
- 【python正则】工作中常用的python正则代码
工作中常用的一些正则代码: 01.用户名正则 import re # 4到16位(字母,数字,下划线,减号)if re.match(r'^[a-zA-Z0-9_-]{4,16}$', "ab ...
- String 字符串的追加，数组拷贝
package chengbaoDemo; import java.util.Arrays; /** *需求:数组的扩容以及数据的拷贝 *分析:因为String的实质是以字符数组存储的,所以字符串的追 ...
- html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能具体解释
在非常多的手机站点上,有打电话和发短信的功能,对于这些功能是怎样实现的呢.事实上不难,今天我们就用html5来实现他们. 简单的让你大开眼界.HTML5 非常easy写,但创建网页时,您常常须要反复做 ...