登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 首页 >> SoftHub关联区 >> SoftHub关联区 >> 主题: [js]jquery获取html元素的绝对位置和相对位置[zt]    [最新]
[js]jquery获取html元素的绝对位置和相对位置[zt]
clq
浏览(0) - 2020-01-09 15:00:07 发表 编辑
经纬度拾取

关键字 显示次序

[目前已存在于分组:]

关键字: javascript

jquery获取html元素的绝对位置和相对位置

  jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:


  绝对位置坐标:
  $("#elem").offset().top
  $("#elem").offset().left


  相对父元素的位置坐标:
  $("#elem").position().top
  $("#elem").position().left

  另:
  static(默认):默认定位方式。
  relative(相对定位):在static的基础上,相对元素本来的位置变化,通过设定top,bottom,left,right实现。
  absolute(绝对定位):是相对父元素来说的,如果父元素中有relative,那么该元素的位置是经过计算后的结果。即absolute定位的参照物是“上一个定位过的父元素(static不算)”。绝对定位会使元素从文档流中被删除。
  fixed(固定定位):fixed定位的参照物总是当前的文档。利用fixed定位,很容易让一个div定位在浏览器文档的左上,右上等方位。

clq  2020-01-09 15:05:32 发表 编辑

原生JS获取页面中DIV绝对位置的方法
公子七
0.032
2017.08.18 10:49:18
字数 403阅读 3,561

在JS获取div高度的方法中,整理了几个有关于获取div高度的方法,后来又遇到一个问题,怎么获取DIV在页面中的绝对位置,因此在这篇笔记中记录一下。
页面结构


helloAzure~



样式

#parent {
border: 1px solid blue;
margin: 10px auto;
width: 500px;
position: relative;
height: 300px;
}
#child {
border: 1px solid pink;
background: yellow;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}

1、getBoundingClientReact()

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

var div = document.getElementById('child');
var reactObj = div.getBoundingClientRect();
console.log(reactObj.left);
console.log(reactObj.top);

2、offset & 遍历

offsetLeft指的是元素相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。
借用这个思路,当我们想获取元素的绝对位置时,可以递归遍历,直到元素的父元素为body为止。

function CPos(x, y) {
this.x = x;
this.y = y;
}

function GetObjPos(ATarget) {
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
// 当元素为body时,其parent为null
while (target) {
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent;
}
return pos;
}

var div = document.getElementById('child');
console.log(GetObjPos(div)['x']); //x坐标
console.log(GetObjPos(div)['y']); //y坐标

关于offsetParent属性,有以下几点Tips。

定位父级offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素;
元素自身有fixed定位,offsetParent的结果为null
当元素自身有fixed固定定位时,我们知道固定定位的元素相对于视口进行定位,此时没有定位父级,offsetParent的结果为null;
元素自身无fixed定位,且父元素都没有经过定位,则offsetParent为body;
元素自身为无fixed定位,且父元素存在经过定位的元素,offsetParent的结果为离自身元素最近的经过定位的父级元素;
body的parentNode是null。
参考深入理解定位父级offsetParent及偏移大小

3、兼容

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.getElementByIdx_x(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) {
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 xd = getElementPos("child");
console.log(xd.x);
console.log(xd.y);


总数:1 页次:1/1 首页 尾页  
总数:1 页次:1/1 首页 尾页  


所在合集/目录
常用js 更多
javascript常用代码收集 更多



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2019 clq, All Rights Reserved
CLQ工作室 版权所有