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

原创 2015年07月08日 22:36:56

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



关于jquery和zepto.js判断元素的可见性并显示或隐藏总结

一、使用jquery控制div的显示与隐藏 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block,   ...

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标 $('img').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().le...

JS元素位置和位置坐标

scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容...

JS+JQuery实现任意意嵌套的IFrame里鼠标相对于浏览器窗体坐标

iframe用过的都人都知道,iframe是一个事件无法向上级冒泡二期交互并不是那么方便的一个html元素,但是时至今日他独特的功能还是会出现在不少开发中,有时我们需要获取任何一个不定的iframe中...

js和jquery中各种宽高坐标

第一章.window和document对象 一.window和document有什么区别    window值得就是浏览器的窗口,包括工具栏,地址栏等等    window一般可以省略     D...

jquery获取元素坐标获取鼠标坐标

获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().lef...

jquery、js调用iframe父窗口与子窗口元素的方法

1、在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测试,且最好在iframe onload加载完毕后 dosomething...) js写法 a、同过cont...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js/jquery关于元素坐标的总结
举报原因:
原因补充:

(最多只允许输入30个字)