用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 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
vuex的简单使用教程
Feb 02 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 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
Dedecms常用函数解析
2008/02/01 PHP
php cout<<的一点看法
2010/01/24 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
浅谈php扩展imagick
2014/06/02 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
几行js代码实现自适应
2017/02/24 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python单例模式实例详解
2017/03/01 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Python用SSH连接到网络设备
2021/02/18 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
Sql面试题
2013/03/20 面试题
护理专业毕业生推荐信
2013/10/31 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
公益广告语集锦
2014/03/13 职场文书
实践单位评语
2014/04/26 职场文书
应届生求职信范文
2014/05/26 职场文书
保护水资源的标语
2014/06/17 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
财务检查整改报告
2014/11/06 职场文书
公司2015年终工作总结
2015/05/26 职场文书
交通事故责任认定书
2015/08/06 职场文书
python常见的占位符总结及用法
2021/07/02 Python