js/jquery关于元素坐标的总结
2015-07-08 22:36
495 查看
最近经常用到获取元素坐标位置,不管是用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
先说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
相关文章推荐
- 使用onsubmit()验证表单并阻止非法提交(使用jQuery)
- 实现jquery EasyUI tabs选项卡关闭图标后加载自定义事件
- jquery插件--多行文本缩略
- jQuery插件flexigrid使用总结
- 一个典型的 jquery flexigrid配置
- jquery用Ajax中的回调函数时注意事项
- $.browser is undefined解决办法
- js和jquery如何获取图片真实的宽度和高度
- 检测jQuery.js是否已加载的判断代码
- 如何检测 jQuery 的版本
- jquery原型方法map的使用和源码分析
- jQuery中常用事件
- jQuery上传插件Uploadify 3.2用法
- 在线计算器源码(HTML+CSS+jQuery)
- jQuery事件代理的应用
- jquery设置元素的readonly和disabled
- Jquery遍历元素
- Jquery实现MD5加密
- jquery easyui form load
- jQuery入口方法