用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 相关文章推荐
JSON 数据格式介绍
Jan 13 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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版(3)
2006/10/09 PHP
php flv视频时间获取函数
2010/06/29 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
thinkphp分页实现效果
2016/10/13 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
Prototype Class对象学习
2009/07/19 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
Python与C/C++的相互调用案例
2021/03/04 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
酒店总经理欢迎词
2014/01/08 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
员工教育培训协议书
2014/09/27 职场文书