js/jquery关于元素坐标的总结

最近经常用到获取元素坐标位置，不管是用js还是jquery都用了好几次了仍记不住，so,在此总结以下以后用到直接来这边找。有写的错误的地方还望指正，我也是正处于学习阶段。废话不多话，开始！

先说js.

 在js中，获取横纵标签使用的是offsetTop和offsetLeft属性，这两个属性都是获取元素距离最近的一个position不为static(即默认)的祖先节点的横向距离和纵向距离，position的值为relative和absolute没有区别。

如果祖先节点中没有position为relative或absolute的，最终会找到body。

如下例：

style:

*{border:0;padding:0;margin:0;}
.grand{
    width:600px;height:1000px;border:1px solid red;
    
}
.parent{
    margin-left:60px;margin-top:500px;width:400px;height:300px;
    border:1px solid gray;position:absolute;
    
}
.self{
    display:block;position:absolute;width:50px;
    height:30px;border:1px solid green;
    position:absolute;
    top:20px;left:50px;
}

html:

<div  class="grand" >
  <div class="parent">
  <span class="self" id="spa1" ></span>
  </div>
</div>

效果如图：

由图看出，class为self的span是相对class为parent的元素定位的（.parent元素的position的值为absolute）

因此获取的值

如果想获取元素的绝对定位，即不管有无滚动条，获取元素到页面顶端和左端的位置，则循环元素即可，方法如下

function getOabsolutpos(dom) {
  var t = dom.offsetTop;
  var l = dom.offsetLeft;
  dom=dom.offsetParent;
  while (dom) {
    t += dom.offsetTop;
    l += dom.offsetLeft;
    dom=dom.offsetParent;
  }; return {
    top: t,
    left: l
  };
}

按照上面的代码，将参数为class是self的span，元素循环的次序是.self——.parent——body

最终

注：为什么不直接通过style获取top和left,呃，泪奔……因为不是内嵌模式的样式，js获取不到啊！

js总结完毕。

jquery方法

相对来说就霸气多了！

首先，获取相对父节点（注：此时的父节点是指离它最近的positon为relative或absolute的祖先节点，如果没有就找到body，这点就不多说了）的距离用positon()方法即可。

position().top  , position().left 不解释！

其次，要获取相对于浏览器顶端和左端的距离，不管有几个positon不为static的节点，一句话，不用循环！因为offset()全搞定！

offset().top  ，offset().left，同样不解释！

最后的最后，为了让元素相对于其定位的节点显得更直观，可以将
.parent中的position:absolute;剪切到 .grand中，结果是这样滴

.selft元素是相对于.grand定位，而不是它真正父节点.parent