var box = document.getElementById("dian");
1.parentNode:父亲节点 HTML结构层级关系中的上一级元素
2.offsetParent:父级参照物 在同一个页面中,最外层的元素里面所有元素的父级参照物都是body(和html结构没有必然联系)
->一般来说一个页面中所有的父级参照物都是body
document.body.offsetParent;//null
想要改变父级参照物需要通过position来进行改变
absolute
relative
fixed
以上都可以进行改变
3.offsetTop/offsetLeft:当前元素距离父级参照物上/左边距偏移量
->offset():等同于jQuery中的offset方法,实现获取页面中任意一个元素距离body的偏移(包含左偏移和上偏移),不管当前元素的父级参照物是谁。
->获取的结果是一个对象{left:距离body的左偏移量,top:距离body上偏移}
->在标准的ie8浏览器中,我们使用offsetLeft/offsetTop其实是把父级参照物的边框也计算在内了
function offset(curEle){ var totalLeft = null,totalTop = null,par = curEle.offsetParent; //首先把自己本身的进行累加 totalLeft += curEle.offsetLeft; totalTop += curEle.offsetTop; //只要没有找到body,我们就把父级参照物的边框和偏移量累加 while(par){ if(navigator.userAgent.indexOf("MSIE 8.0") === -1){ //不是标准的ie8浏览器,才进行边框累加 //累加父级参照物边框 totalLeft += par.clientLeft; totalTop += par.clientTop; } //累加父级参照物本身的偏移 totalLeft += par.offsetLeft; totalTop += par.offsetTop; par = par.offsetParent; } return {left:totalLeft,top:totalTop}; } console.log(offset(box).top);