页面元素的定位：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 ...
随机推荐
- CentOS 7 yum 安装redis(更简单)
一.安装redis 1.检查是否有redis yum 源 1 yum install redis 2.下载fedora的epel仓库 1 yum install epel-release 3.安装re ...
- Python数据分析4------------数据变换
1.简单变换: 开方.平方.对数等 2.数据规范化: (1)离差标准化(最小最大标准化):消除量纲(单位)影响以及变异大小因素的影响. x1=(x-min)/(max-min) 代码:data1=(d ...
- 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
// 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...
- 训练1-J
把一个偶数拆成两个不同素数的和,有几种拆法呢? Input 输入包含一些正的偶数,其值不会超过10000,个数不会超过500,若遇0,则结束. Output 对应每个偶数,输出其拆成不同素数的个数,每 ...
- mplayer configure选项中文注释
mplayer configure选项中文注释(MPlayer-1.0rc2) http://blogold.chinaunix.net/u3/104581/showart_2322466.html ...
- SpringMVC在对应绑定不同实体,但具有相同属性名的解决方案....
在springmvc中,可以对前台传递过来的参数进行与后台实体绑定(第二种方式相对较好). 比如: 前台页面: <form action="${pageContext.request. ...
- html--onreadystatechange属性
- [Linux]第四部分-Linux用户管理
登陆过程:1.从etc/passwd中查找账号,没有则退出,然后在etc/shadow中读出uid与密码表passwd中内容格式 用户名:密码:UID:GID:用户信息说明:家目录:用户所用Shell ...
- disruptor实操作手冊（二）
多消费者场景 上一篇文章介绍了怎样构建一个简单的disruptorproject之后.应该有相当一部分客官骂娘了,确实这种范例在其他地方多的是. 从这篇開始,介绍一些不一样的东西. 一,多个消费者: ...
- 页面与后台传递中文乱码问题（java乱码）
1.前台中文传递到后台乱码. 前台不须要处理, 系统一般都会默认把中文转化为ISO-8859-1类型. 仅仅需在后台接受数据是处理 Str为前台传过来的中文字符串: String inputer = ...