jquery获取div距离窗⼝和⽗级dv的距离⽰例
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 + p/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; }jquery弹出div窗口
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 })

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。