当前位置：首页 > 资讯 > 技术文档

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

时间：2020-07-15 05:53 编辑：来源：阅读：
扫一扫，手机访问

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

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

[u]复制代码[/u] 代码如下:

*{ 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:

[u]复制代码[/u] 代码如下:

<body>
<div class="a"> a<div>
<div class="parentBox">
<div class="innerBox">innerBox</div>
</div>
</body>

js:

[u]复制代码[/u] 代码如下:

$(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：

[u]复制代码[/u] 代码如下:

*{ 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:

[u]复制代码[/u] 代码如下:

<body>
<div class="a"> a<div>
<div class="parentBox">
<div class="innerBox">innerBox</div>
</div>
</body>

js:

[u]复制代码[/u] 代码如下:

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

全部评论(0)

上一篇：jQuery表单元素选择器代码实例
下一篇：jquery调整表格行tr上下顺序实例讲解

资讯排行榜
更多>>