获取元素的偏移量
获取父级节点
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,
??????};
????}