用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动画效果代码3
Apr 03 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
React.js入门学习第一篇
Mar 30 Javascript
jQuery插件制作的实例教程
May 16 Javascript
jquery自适应布局的简单实例
May 28 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
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 date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
js星星评分效果
2014/07/24 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
vue 设置路由的登录权限的方法
2018/07/03 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python中os模块详解
2016/10/14 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
python切割图片的示例
2020/11/12 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
开学典礼策划方案
2014/05/28 职场文书
施工安全协议书范本
2014/09/26 职场文书
高中教师个人工作总结
2015/02/10 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
永远是春天观后感
2015/06/12 职场文书
Golang map映射的用法
2022/04/22 Golang