位置:首页 » 技术 » 页面元素的定位:getBoundingClientRect()跟document.documentElement.scrollTop

页面元素的定位:getBoundingClientRect()跟document.documentElement.scrollTop

日期:2013-08-02 阅读:1num
Advertisement

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

页面元素的定位:getBoundingClientRect()跟document.documentElement.scrollTop

页面元素的定位:getBoundingClientRect()跟document.documentElement.scrollTop

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

页面元素的定位:getBoundingClientRect()跟document.documentElement.scrollTop


<!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.scrollTopdocumentElement 对应的是 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; }文章来源:1.http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html          2.http://solodu.javaeye.com/blog/574912
相关文章
  • 页面元素的定位:getBoundingClientRect()跟document.documentElement.scrollTop 页面元素的定位:getBoundingClientRect()跟document.documentElement.scrollTop

    页面元素的定位:getBoundingClientRect()和document.documentElement.scrollTop 1.document.documentElement.getBoundingClientRect MSDN对此的解释是: Syntax oRect = object.getBoundingClientRect() Return Value Returns a TextRectangle object. Each rectangle has four integer

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

    火狐.谷歌.IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.onscroll=function () { var oId=document.getElementByIdx_x("id"); oId.

  • Chrome 对document.documentElement.scrollTop不分辨

    Chrome 对document.documentElement.scrollTop不识别 最近做一个瞬间信息显示浮动层时,IE.Firefox下都能显示正常,但Chrome下出现了浮动层永远显示在上面,经过仔细分析,发现Chrome对document.documentElement.scrollTop的识别会出现误差.不过加上document.body.scrollTop后,则显示正常. 网友提示:由于document.documentElement.scrollTop和document.bo

  • document.body.scrollTop跟document.documentElement.scrollTop

    document.body.scrollTop和document.documentElement.scrollTop 作者:zccst 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.

  • 关于Chrome(谷歌浏览器)对document.documentElement.scrollTop==零

    关于Chrome(谷歌浏览器)对document.documentElement.scrollTop==0 信息显示浮动层时,IE.Firefox下都能显示正常,但Chrome下出现了浮动层永远显示在 上面,经过仔细分析,发现Chrome对document.documentElement.scrollTop的识别会出 现误差.不过加上document.body.scrollTop后,则显示正常. 由于document.documentElement.scrollTop和document.body

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

    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 re

  • 用Javascript获取页面元素的位置 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

  • javascript获取页面元素具体位置方法 javascript获取页面元素具体位置方法

    记得以前getBoundingClientRect只能在ie下使用,现在可以在FF3+,opera9.5+,safari 4,最初我们只用x += el.offsetLeft;_y += el.offsetTop;}while(el=el.offsetParent);return {x:_x,y:_y};这类代码来解决. getBoundingClientRect():该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有是个属性:top,

  • 关于弹出层显示出现的定位步骤 document.documentElement.scrollLeft document.body.sc

    关于弹出层显示出现的定位方法 document.documentElement.scrollLeft document.body.sc 取得鼠标的坐标方法: /*** 鼠标坐标位置 **/ function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { //使用document.documentElement.scrollLeft 这个document.body.s

  • js 获取页面元素的位置的例子

    要讲到元素位置的获得各位朋友肯定会想到clientTop || body.clientTop之类的方法了,下面我们就一起来看看是不是这些函数吧. John Resig给出的方案就是用clientTop,clientLeft作减值.以下函数就是从JQuery中抠出来,就后就用它获取页面元素的坐标,比offset大法安全多了. var getCoords = function(el){ var box = el.getBoundingClientRect(), doc = el.ownerDocum

  • Javascript 获取指定页面元素的位置

    Javascript 获取指定页面元素的位置是一个非常常见的需求,本文介绍的方法能够准确返回一个元素相对于整个文档左上角的坐标,即元素的 top .left 的位置,而且能够兼容浏览器,相信对新手非常有用 代码如下 复制代码 <script language="JavaScript" type="text/javascript"> <!-- // 说明:用 Javascript 获取指定页面元素的位置 // 整理:http://www.111cn.

  • js获取页面元素到页面座标

    js获取页面元素到页面坐标 忘了是在哪里拷贝的,觉得很有用,今天用js做自动补全效果的时候到网上几乎搜了半个小时才搜索到页面元素的坐标获取方式,这种方法不管是元素外面有多少个父容器,他总是获取的是到页面左侧和丁侧的距离: 这个getElementPos方法的原理也很清楚了--以这个节点为基础向外循环所有节点并计算出他们到其父容器的高度和宽度(貌似是offsetLeft,和offsetTop) ,把所有的left相加就是X坐标,把左右的top相加 就是Y坐标 具体实现如下: function ge

  • DW MX控制页面元素 DW MX控制页面元素

    浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过CSS控制页面元素精确定位后,这一点就不难实现了. 建立主菜单栏 新建页面,执行菜单"Insert/Table"命令打开"Insert Table"对话框,插入一个一行多列的表格,表格列数由你的菜单条目决定,同时设置"Cell Padding"."Cell Spacing"以及"

  • 用Dreamweaver MX控制页面元素 用Dreamweaver MX控制页面元素

    浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过CSS控制页面元素精确定位后,这一点就不难实现了. 建立主菜单栏新建页面,执行菜单"Insert/Table"命令打开"Insert Table"对话框,插入一个一行多列的表格,表格列数由你的菜单条目决定,同时设置"Cell Padding"."Cell Spacing"以及"B

  • 巧用Dreamweaver MX控制页面元素 巧用Dreamweaver MX控制页面元素

    浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过CSS控制页面元素精确定位后,这一点就不难实现了. 建立主菜单栏 新建页面,执行菜单"Insert/Table"命令打开"Insert Table"对话框,插入一个一行多列的表格,表格列数由你的菜单条目决定,同时设置"Cell Padding"."Cell Spacing"以及"

  • js中document.documentElement和document.body用法区别

    在js网页开发中我们常会碰到关于document.documentElement和document.body一些使用方法,下面我来总结这两者的区别,有需要的朋友可参考. 网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: 代码如下 复制代码 <div id="div" style="width:100px;height:100px;background:#ccc;position:absolut

  • 转 document.body跟document.documentElement,document.compatMode的关系

    转 document.body和document.documentElement,document.compatMode的关系 转自 http://www.seobye.com/div-css/90 对于document.compatMode ,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.其实这个对于我们 开发兼容性的web页面还是很有帮助,我们都知道,盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在不声明Doctype的情况下,浏览器默认

  • 增添和删除页面元素

    添加和删除页面元素 function Button1_onclick() { var divone=document.getElementById("ModifyDiv"); if(!divone) { divone=document.createElement("Div"); divone.id="ModifyDiv"; divone.style.width="200px"; divone.style.height=&quo

  • 怎么才能保证ajax和其他页面元素执行的先后顺序

    如何才能保证ajax和其他页面元素执行的先后顺序 $(document).ready(function(){ var chk = document.getElementById("checkall"); chk.setAttribute("checked",true); checkAll(chk); }); 有这么个情况,我用ajax做了一个checkbosx复选框,除了"全选"外,其他框都是ajax生成. 然后我用上面代码想要实现的目的,就是页

  • 一个document.documentElement.clientWidth为0的有关问题

    一个document.documentElement.clientWidth为0的问题 一个document.documentElement.clientWidth为0的问题 关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s = " 网页可见区域宽:" document.body.clientWidth; s = " 网页可见区域高:" document

最新文章
  • 校园感恩节活动策划(四)

    一.指导思想 让学生常怀感恩之心,不忘父母恩.师长恩.社会恩等,精心培育学生"感恩文化",塑造学生的健全人格,养成学生良好的道德品质和行为习惯,使学生从小做到心中有祖国.有集体.有他人的思想,从而弘扬中华民族优良的传统美德和现代文明,全面推进素质教育. 二.活动时间:11月 三.活动口号:感恩社会,感恩学校,感恩家庭 四.主要内容及安排: (1)宣传发动阶段 1.国旗下演话,宣读<感恩教育倡议书>,全员发动. 2.以"感恩"为主题开设红领巾广播站栏目,创

  • 四大招解决提高软文写作的障碍技巧

    随着搜索引擎算法不断的完善和变更,以往的推广方式似乎已经不能再成为主流的手段.慢慢的倾向于软文的投放.所以对于软文推广的技巧在这里还是有必要和大家分享一下,以下只是本人这段时间以来总结的小小的经验,至于对大家有用没用欢迎给予适当的评价. 1.确定主题,除了你所要推广的对象外,还可以结合时事进行扩充,也就是所谓的事件营销.对于站长朋友来说,经常将自己的做站经验和心得由浅入深.由粗入细的整理出来,在文章里面适当的加上自身站点的链接,或是锚文本,即对自己是个肯定也对他们有所帮助,在一定程度上增加了网站

  • 影楼巧妙接待不同类型的顾客

    对于一个经验丰富.老练的门市来说,她们往往能够从一群人中一眼就判断出谁是真正的顾客.什么样的顾客,应该如何接待.而对于一般的门市,可能会经常遇到这样一种情况:在使出混身解数,说得口干舌燥之后,才发现费尽心力所说服的顾客根本就不是"真正的顾客".所以,我们的门市必须慧眼独具,把握好不同顾客的消费动机和心理特征,采取不同的接待技巧,可以有效的提高成功率,这是婚纱影楼的每一位门市所必须掌握的基本功.那么,如何善于分辨不同类型顾客的特征.又如何在分辨之后巧用接待技巧呢? 问:顾客可根据年龄层次

  • 外星人或曾造访地球 史前壁画为何至今难解 外星人或曾造访地球 史前壁画为何至今难解

    据外国媒体报道,几乎每个月都会勘测到一颗类似地球的系外行星,未来发现可能存在生命的行星将不再遥远.最新出版一本新书详细描述未来地球人类将如何与地外文明进行通信,一些有趣章节讲解了外星人过去.现在和未来如何进行通讯. 这本新书名为<考古学.人类学和星际通信>,是由搜寻地外文明计划(SETI)协会星际信息构成主管道格拉斯-瓦科赫(Douglas Vakoch)编撰的,在其它专家的帮助下,他处理了一些研究课题,其中包括:探索其它行星可能存活的生命,人类可能发送或者接收外星人信息的方法等. 瓦科赫在这

  • PHP自动生成表单代码分享

    在PHP开发过程中,我们有时候会遇到表单不固定的情况,需要在程序运行过程中动态生成,这里分享一个PHP自动创建表单的类给大家 Form.php ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

  • 灿烂千阳好词好句摘抄

    灿烂千阳好词好句摘抄: <灿烂千阳>好词: 如愿以偿 心安理得 悔恨莫及 毫无怨言 骤然中断 幽谷密林 无耻的姿态 流水的冲刷 飞舞的碎片 美丽的彩虹 温柔而深沉 锐利的记忆 私欲 召唤 掸走 浮现 忐忑 皎洁 灿烂 闪耀 <灿烂千阳>好句: 1 . 娜娜说,就像指南针总是指向北方一样,男人怪罪的手指总是指向女人. 2 . 无论什么时候,若这一对剧毒的两生花开始在那片干涸的土地上生长出来,玛丽雅姆就会将它们连根拔除.她把它们拔起来,还没拿稳就赶紧将其掩埋. 3 . 人们数不清她的屋

  • 结合JQ1.9通过js正则判断各种浏览器版本的方法

    如下所示:$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase()); $.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase()); $.browser.opera = /opera/.test(navigator.userAgent.toLowerCase()); $.browser.msie = /msie/.test(navigator

  • 怎么把表单中的 webbrows 控件打印出来

    如何把表单中的 webbrows 控件打印出来 想把 用webbrow 控件 获取到的网页内容打印出来, 应该如何做 --cut-- WebBrowser.ExecWB(6,1) 打印 WebBrowser.ExecWB(7,1) 打印预览 WebBrowser.ExecWB(8,1) 打印页面设置

  • 小弟我只想好好工作

    我只想好好工作 我只想好好工作,好好学习!像一头饿狼般吸收着自己喜欢和感兴趣的知识和为自己热爱的事业尽心尽力---而我在学校却难以实现... 今天依旧像往常一样不带着心来上日语课了--结果在被叫到之后,因为自己什么也没听过也没看过,导致就这样尴尬了半分钟,后来老师就开始批评了!!!真的很丢脸很丢脸!!!这个我倒不是很在乎,毕竟自从大三起我选择了这样一条路就没想着能够全身而退--可作为第一次教我们日语兼监考老师的她居然放出狠话说这次谁也别想抄--没办法,只好赶紧知耻而后勇呗-- 我并非是被老师给吓

  • hsqldb源码分析起步调试

    hsqldb源码分析启动调试 hsqldb是java版的简化数据库,代码量比较少,对于学习数据库的设计是一个比较好的选择, 对于derby代码量比较大,mysql c++更复杂,所以就通过学习hsqldb来学习数据库的设计. 在这里可以下载到源码http://hsqldb.org/,源码包下org.hsqldb.test有很多的测试类,大家可以从这里开始调试学习hsqldb. HyperSQL 数据库叫catalog,根据数据库存储方式不同分为几种: • mem: stored entirely

热门推荐