JS 获取元素的偏移量

获取元素的偏移量

获取父级节点

curEle.parentNode

document.parentNode -> null

父级参照物

offsetParent: 父级参照物

在同一个平面中, 最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)

一般来说一个页面中所有的父级参照物都是body
body的父级参照物是null

使用position

想要改变父级参照物需要通过positon定位来进行改变: absolute, relative, fixed 任意一个值都可以把父级参照物进行修改

不能修改的有, static, inherit

offSetTop/ offSetLeft

offSetTop/ offSetLeft, 当前元素(外边框)距离其父级参照物的(内边框)偏移距离

获取距离body的左偏移

求出页面中任意一个元素(不管它的父级参照物是谁)距离body的左偏移

• 首先加上自己本身的左偏移
• 获取自己的父级参照物P, 把P的左边框和左偏移都加上
• 基于当前的P再向上找父级参照物, 找到后依然是累加边框和其左偏移
• 一直到父级参照物为null, 已经找到body了

图示:

代码

offset: 等同于jQuery中的offset方法, 实现获取页面中任意一个元素, 距离body的偏移(包括左偏移和上偏移), 不管当前元素的父级参照物是谁

function?offset(curEle)?{
??????var?totallLeft?=?null,
????????totalTop?=?null,
????????par?=?curEle.offsetParent;
??????totallLeft?+=?curEle.offsetLeft;
??????totalTop?+=?curEle.offsetTop;
??????while?(par)?{
????????totallLeft?+=?par.clientLeft;
????????totalTop?+=?par.clientTop;
????????totallLeft?+=?par.offsetLeft;
????????totalTop?+=?par.offsetTop;
????????par?=?par.offsetParent;
??????}
??????return?{
????????left:?totallLeft,
????????top:?totalTop,
??????};
????}

兼容

在标准的IE8浏览器中, 我们使用offsetLeft/ offsetTop, 其实是把父级参照物的边框已经算在内了, 所以我们不需要自己再单独的加边框了

以下是兼容IE8浏览器的代码

?function?offset(curEle)?{
??????var?totallLeft?=?null,
????????totalTop?=?null,
????????par?=?curEle.offsetParent;
??????totallLeft?+=?curEle.offsetLeft;
??????totalTop?+=?curEle.offsetTop;
??????while?(par)?{
????????if?(navigator.userAgent.indexOf("MSIE?8.0")?===?-1)?{
??????????//不是标准的IE8浏览器，?我们才累加边框
??????????totallLeft?+=?par.clientLeft;
??????????totalTop?+=?par.clientTop;
????????}
????????totallLeft?+=?par.offsetLeft;
????????totalTop?+=?par.offsetTop;
????????par?=?par.offsetParent;
??????}
??????return?{
????????left:?totallLeft,
????????top:?totalTop,
??????};
????}