用Javascript获取页面元素的具体位置


Posted in Javascript onDecember 09, 2013

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。

下面的教程总结了Javascript在网页定位方面的相关知识。

一、网页的大小和浏览器窗口的大小

首先,要明确两个基本概念。

一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。

浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口)。

很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示,则滚动浏览器窗口,可以显示出网页的各个部分。

二、获取网页的大小

网页上的每个元素,都有clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积,不包括border和滚动条占用的空间。
用Javascript获取页面元素的具体位置 
(图一 clientHeight和clientWidth属性)

因此,document元素的clientHeight和clientWidth属性,就代表了网页的大小。

function getViewport(){ 


if (document.compatMode == "BackCompat"){ 



return { 




width: document.body.clientWidth, 




height: document.body.clientHeight 



} 


} else { 



return { 




width: document.documentElement.clientWidth, 




height: document.documentElement.clientHeight 



} 


} 

}

上面的getViewport函数就可以返回浏览器窗口的高和宽。使用的时候,有三个地方需要注意:

1)这个函数必须在页面加载完成后才能运行,否则document对象还没生成,浏览器会报错。

2)大多数情况下,都是document.documentElement.clientWidth返回正确值。但是,在IE6的quirks模式中,document.body.clientWidth返回正确的值,因此函数中加入了对文档模式的判断。

3)clientWidth和clientHeight都是只读属性,不能对它们赋值。
三、获取网页大小的另一种方法

网页上的每个元素还有scrollHeight和scrollWidth属性,指包含滚动条在内的该元素的视觉面积。

那么,document对象的scrollHeight和scrollWidth属性就是网页的大小,意思就是滚动条滚过的所有长度和宽度。

仿照getViewport()函数,可以写出getPagearea()函数。

function getPagearea(){ 


if (document.compatMode == "BackCompat"){ 



return { 




width: document.body.scrollWidth, 




height: document.body.scrollHeight 



} 


} else { 



return { 




width: document.documentElement.scrollWidth, 




height: document.documentElement.scrollHeight 



} 


} 

}

但是,这个函数有一个问题。如果网页内容能够在浏览器窗口中全部显示,不出现滚动条,那么网页的clientWidth和scrollWidth应该相等。但是实际上,不同浏览器有不同的处理,这两个值未必相等。所以,我们需要取它们之中较大的那个值,因此要对getPagearea()函数进行改写。
function getPagearea(){ 


if (document.compatMode == "BackCompat"){ 



return { 




width: Math.max(document.body.scrollWidth, 








document.body.clientWidth), 




height: Math.max(document.body.scrollHeight, 








document.body.clientHeight) 



} 


} else { 



return { 




width: Math.max(document.documentElement.scrollWidth, 








document.documentElement.clientWidth), 




height: Math.max(document.documentElement.scrollHeight, 








document.documentElement.clientHeight) 



} 


} 

}

四、获取网页元素的绝对位置

网页元素的绝对位置,指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

首先,每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。所以,只需要将这两个值进行累加,就可以得到该元素的绝对坐标。
用Javascript获取页面元素的具体位置 
(图二 offsetTop和offsetLeft属性)

下面两个函数可以用来获取绝对位置的横坐标和纵坐标。

function getElementLeft(element){ 


var actualLeft = element.offsetLeft; 


var current = element.offsetParent; 


while (current !== null){ 



actualLeft += current.offsetLeft; 



current = current.offsetParent; 


} 


return actualLeft; 

} 

function getElementTop(element){ 


var actualTop = element.offsetTop; 


var current = element.offsetParent; 


while (current !== null){ 



actualTop += current.offsetTop; 



current = current.offsetParent; 


} 


return actualTop; 

}

由于在表格和iframe中,offsetParent对象未必等于父容器,所以上面的函数对于表格和iframe中的元素不适用。

五、获取网页元素的相对位置

网页元素的相对位置,指该元素左上角相对于浏览器窗口左上角的坐标。

有了绝对位置以后,获得相对位置就很容易了,只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离,是document对象的scrollTop属性;滚动条滚动的水平距离是document对象的scrollLeft属性。
用Javascript获取页面元素的具体位置 
(图三 scrollTop和scrollLeft属性)

对上一节中的两个函数进行相应的改写:

function getElementViewLeft(element){ 


var actualLeft = element.offsetLeft; 


var current = element.offsetParent; 


while (current !== null){ 



actualLeft += current.offsetLeft; 



current = current.offsetParent; 


} 


if (document.compatMode == "BackCompat"){ 



var elementScrollLeft=document.body.scrollLeft; 


} else { 



var elementScrollLeft=document.documentElement.scrollLeft; 


} 


return actualLeft-elementScrollLeft; 

} 

function getElementViewTop(element){ 


var actualTop = element.offsetTop; 


var current = element.offsetParent; 


while (current !== null){ 



actualTop += current. offsetTop; 



current = current.offsetParent; 


} 


 if (document.compatMode == "BackCompat"){ 



var elementScrollTop=document.body.scrollTop; 


} else { 



var elementScrollTop=document.documentElement.scrollTop; 


} 


return actualTop-elementScrollTop; 

}

scrollTop和scrollLeft属性是可以赋值的,并且会立即自动滚动网页到相应位置,因此可以利用它们改变网页元素的相对位置。另外,element.scrollIntoView()方法也有类似作用,可以使网页元素出现在浏览器窗口的左上角。

六、获取元素位置的快速方法

除了上面的函数以外,还有一种快速方法,可以立刻获得网页元素的位置。

那就是使用getBoundingClientRect()方法。它返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。

所以,网页元素的相对位置就是

var X= this.getBoundingClientRect().left; 

var Y =this.getBoundingClientRect().top;

再加上滚动距离,就可以得到绝对位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; 

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前,IE、Firefox 3.0+、Opera 9.5+都支持该方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。
Javascript 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
原生js实现随机点名
Jul 05 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 #Javascript
JavaScript—window对象使用示例
Dec 09 #Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 #Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 #Javascript
深入理解JavaScript中的传值与传引用
Dec 09 #Javascript
js Array操作的最简短最容易理解方法
Dec 09 #Javascript
javascript放大镜效果的简单实现
Dec 09 #Javascript
You might like
PHP类的反射用法实例
2014/11/03 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
2009/08/04 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python在线运行代码助手
2016/07/15 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Numpy数组的广播机制的实现
2020/11/03 Python
用Python 执行cmd命令
2020/12/18 Python
简历自我评价模版
2014/01/31 职场文书
教师节学生演讲稿
2014/09/03 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书