关闭

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

51人阅读 评论(0) 收藏 举报
分类:

最近经常用到获取元素坐标位置,不管是用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



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52次
    • 积分:10
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档