(转)用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。
下面的教程总结了Javascript在网页定位方面的相关知识。
一、网页的绝对大小和相对大小
首先,要明确两个基本概念。
一张网页的全部面积,就是它的绝对大小。通常情况下,网页的绝对大小由内容和CSS样式表决定。
网页的相对大小则是指在浏览器窗口中看到的那部分网页,也就是浏览器窗口的大小,又叫做viewport(视口)。
下图中央的方框就代表浏览器窗口,每次只能显示一部分网页。
(图一 网页的绝对大小和相对大小)
很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的绝对大小和相对大小是相等的。
二、获取网页的相对大小
网页上的每个元素,都有clientHeight和clientWidth属性,利用它们就可以得到网页的相对大小。这两个属性代表的大小,是指元素的内容部分再加上padding的大小,但是不包括border和滚动条占用的空间。
(图二 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都是只读属性,不能对它们赋值。
三、获取网页的绝对大小
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)
}
}
}
四、获取网页元素的绝对位置
由于网页大小有绝对和相对之分,所以网页元素的位置也有绝对和相对之分。网页元素的左上角相对于整张网页左上角的坐标,就是绝对位置;相对于浏览器窗口左上角的坐标,就是相对位置。
Javascript语言中,网页元素的绝对坐标要通过计算才能得到。每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。所以,只需要将这两个值进行累加,就可以得到该元素的绝对坐标。
(图三 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属性。
(图四 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不支持。
(完)
转载于:https://www.cnblogs.com/jiangchongwei/archive/2009/09/23/1572391.html
(转)用Javascript获取页面元素的位置相关推荐
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- 用getBoundingClientRect()来获取页面元素的位置
以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0; do{ _x += el.offsetLeft; ...
- 通过哪些方法可以获取页面的html元素,JavaScript获取页面元素的常用方法详解
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- 获取html元素的位置,如何获取页面元素的位置
背景:最近在商品列表项目迭代中,需要在商品列表底部增加一个分销商品广告位,另外接收到一个产品曝光度的埋点需求,需要知道产品出现在用户视口后在进行数据统计! 基于虚拟 DOM 数据驱动的思想,最不提倡的 ...
- java 获取页面元素的位置_Selenium Java 页面元素定位2
一.操作目的 1.1 自动化测试常用操作 1.定位网页上的元素,并存储到一个变量中: 2.对变量进行操作,比如点击或输入文字: 3.设定页面元素的操作值: 二.定位方法汇总 2.1 findEleme ...
- vue 获取元素在浏览器的位置_前端开发JS获取页面元素的位置
1.网页的大小和浏览器窗口的大小 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和 document元素的clientHeight和clientWidth属性,就代表了网页的大小. f ...
- JavaScript获取页面元素
1.通过 ID 获取元素 document.getElementById() <body><div id = "time">1999-12-29</d ...
- [html] 精确获取页面元素位置的方式有哪些?
[html] 精确获取页面元素位置的方式有哪些? let btn = document.querySelector('#ele') let {top, left} = getComputedStyle ...
- 获取页面元素的滚动位置,兼容各浏览器
/***获取页面元素的滚动位置@param {DOM} el Dom元素*return {Object} 元素滚动位置对象*/function getScroll (el) {var d = el,d ...
- Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
最新文章
- python 复制 移动 重命名文件
- C语言日志级别和作用,自己写的C语言通用日志框架,可以控制日志输出等级
- goland idea设置代码自动换行
- redis入门demo
- 图片链接生成器软件_推荐10个小众但是黑科技十足的Windows软件
- javaweb学习总结(二十五):jsp简单标签开发(一)
- 通过超分辨率重构来提高二维码的对比度
- c++ 使用未初始化的内存_C语言内存分布(内核区、堆栈区等)
- python共享内存通信mapofview_python map eval strPython socket模块实现的udp通信功能示例...
- 查询记录rs.previous()使用
- jeesite应用实战(数据增删改查),认真读完后10分钟就能开发一个模块
- 通过二层交换机的局域网配置
- 基于java的企业人事管理系统的设计与实现(含源文件)
- django打开html页面跳转,django创建最简单HTML页面跳转方法
- 让电脑假装蓝屏的C语言,【技术天地】一句命令让你的电脑蓝屏~(有强迫症的童鞋试试~~)...
- 每日学习笔记(12)
- 神秘海域:顶级工作室“顽皮狗”成长史(中)
- 操作系统:什么是中断?
- 区块链安全:实现公链双花攻击的多种方法
- windows无法删除****,找不到指定文件,请确定指定的路径及文件名是否正确的解决
热门文章
- 【PAT】A-1076:Forwards on Weibo(有向图的BFS遍历)
- linux 下拉式 终端,Gnome桌面的下拉式终端: Guake
- 处理数字音乐文件用计算机软件,工具软件商标注册属于第几类?
- k touch for android,k touch for android新十年
- linux定时器无法重启pm2,在linux下开机启动pm2 不成功
- java 文件存在 却找不到文件_当文件确实存在时,ProcessBuilder给出“找不到文件”异常...
- TCP端口扫描[Python3.5]
- MLOps- 吴恩达Andrew Ng Overview of the ML Lifecycle and Deployment Week1 论文等资料汇总
- 算法:同构字符串205. Isomorphic Strings
- 直击架构本质:优秀架构师必须掌握的几种架构思维