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,   ...

JS元素位置和位置坐标

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

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

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

JS 常用函数 去空格、去重复元素 jquery去空格 1410231

JS 常用函数(去空格、去重复元素) JS去除空格函数 str为要去除空格的字符串: 去除所有空格:    str   =   str.replace(/\s+/g,""); ...

js代理监听动态添加元素事件(类似jquery的delegate事件)

很多时候我们需要监听动态添加的元素事件。 举个例子: 页面中有一个div,div中有一个button以及一个table,我们需要在点击button的时候相应的table行进行排序,而根据特定需求aja...

jQuery第二课 ——节点选择、元素创建与操作、包装对象、jq转原生js

15、节点的选择 (1).first() (2).last() (3).slice() 参数 :[开始位置 ,结束位置) 不包括结束位置(4).children(...
  • wstpa
  • wstpa
  • 2015-10-17 10:35
  • 615

JQuery对象与DOM对象相互转换以及JS和JQyery获取<select>元素当前值的方法

JQuery Object and DOM Object option1 option2 option3 JQuery对象和DOM对象不能混肴,J...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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