js获取元素在页面的相对/绝对位置

您所在的位置：网站首页 › javascript如何获取页面对象 › js获取元素在页面的相对/绝对位置

js获取元素在页面的相对/绝对位置

2024-07-01 05:59:53| 来源: 网络整理| 查看: 265

我们可以先用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置｛这个方法返回的是一个对象，即Object，该对象具有4个属性：top，left，right，bottom ｝

然后再计算浏览器滚动条的值，2个值相加即可得到元素在页面的位置！

假如我们现在要获得元素obj在页面的左上角坐标位置，计算公式如下：

代码如下复制代码

//chrome不能识别document.documentElement用document.body兼容 var sTop=document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; var sLeft= document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;

该obj元素在页面的Left值=obj.getBoundingClientRect().left + sLeft

该obj元素在页面的Top值=obj.getBoundingClientRect().top + sTop

注：getBoundingClientRect()方法方法之前只有ie支持，现在FF3.0+和Opera9.5+都已经支持该方法，可以说在获得页面元素位置上效率能有很大的提高！

那么我们要如何获取绝对位置呢

代码如下复制代码

function findPosX(obj) { var curleft = 0;

if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回body while (obj.offsetParent) {//遍历所有父类元素 curleft += obj.offsetLeft;//当前元素的左边距 obj = obj.offsetParent; } } else if (obj.x) curleft += obj.x; return curleft; }

平时我用这种累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层的办法在实际工作中遇到一些问题就是元素有border 时会有问题会发生计算出的位置不是很准确的问题尤其在IE下和其他浏览器计算位置不对

下面大家可看个实例

代码如下复制代码function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof var el = document.getElementById(elementId); if(el.parentNode === null || el.style.display == 'none') { return false; } var parent = null; var pos = []; var box; if(el.getBoundingClientRect) //IE { box = el.getBoundingClientRect(); var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); return {x:box.left + scrollLeft, y:box.top + scrollTop}; } else if(document.getBoxObjectFor) // gecko { box = document.getBoxObjectFor(el); var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0; var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0; pos = [box.x - borderLeft, box.y - borderTop]; } else // safari & opera { pos = [el.offsetLeft, el.offsetTop]; parent = el.offsetParent; if (parent != el) { while (parent) { pos[0] += parent.offsetLeft; pos[1] += parent.offsetTop; parent = parent.offsetParent; } } if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) { pos[0] -= document.body.offsetLeft; pos[1] -= document.body.offsetTop; } } if (el.parentNode) { parent = el.parentNode; } else { parent = null; } while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors pos[0] -= parent.scrollLeft; pos[1] -= parent.scrollTop; if (parent.parentNode) { parent = parent.parentNode; } else { parent = null; } } return {x:pos[0], y:pos[1]}; }

调用方法：

代码如下复制代码var pos = getElementPos(ElementId);

pos.y //标识距离顶部的距离

pos.x //表示距离左边的距离

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

js获取元素在页面的相对/绝对位置

js获取元素在页面的相对/绝对位置

今日新闻

点击排行

推荐新闻

图片新闻

专题文章