首页 / JQUERY / jquery获取div距离窗口和父级dv的距离示例

jquery获取div距离窗口和父级dv的距离示例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery获取div距离窗口和父级dv的距离示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1682字，纯文字阅读大概需要3分钟。

内容图文

jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。

（1）先介绍jquery.offset().top / left
css：
代码如下:


*{ margin: 0px; padding: 0px; } 
div{ margin: 0px auto; } 
.a{ width: 960px; height: 200px; } 
.parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; } 
.innerBox{ padding: 20px; margin-top: 10px; width: 400px; height: 100px; } 
 
html: 
 代码如下:

<body> 
<div class="a"> a<div> 
<div class="parentBox"> 
<div class="innerBox">innerBox</div> 
</div> 
</body> 
 
js: 
 代码如下:

$(function(){ 
var_offsetTop = $(".innerBox").offset().top; //280px 
}) 
 
这里的280px= a.height/200px + parentBox.padding-top/30px + parentBox.margin-top/40px + innerBox.margin-top/10px; 
//如果这边parentBox设置position： relative； innerBox设置position：absolute；并且innerBox设置了top： 40px； 
//此时_offsetTop的值为290px = a.height/200px + parentBox.margin-top/40px + innerBox.margin-top/10px + ineBox.top/40px; 
//因为绝对定义是以父级div的左上角的内边框为参考坐标的。 
//如果innerBox设置了边框的话还要加上边框的值 

（2）jqury.position().top /left用于获取子div距离父级div的距离，并且子div必须是绝对定位 
css： 
 代码如下:

*{ margin: 0px; padding: 0px; } 
div{ margin: 0px auto; } 
.a{ width: 960px; height: 200px; } 
.parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; position: relative; } 
.innerBox{ padding: 20px; margin-top: 10px; width: 400px; height: 100px; position: absolute; } 
 
html: 
 代码如下:

<body> 
<div class="a"> a<div> 
<div class="parentBox"> 
<div class="innerBox">innerBox</div> 
</div> 
</body> 
 
js: 
 代码如下:

$(function(){ 
var_offsetTop = $(".innerBox").offset().top; //280px 
})

内容总结

以上是互联网集市为您收集整理的jquery获取div距离窗口和父级dv的距离示例全部内容，希望文章能够帮你解决jquery获取div距离窗口和父级dv的距离示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/365270.html

来源：【匿名】