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

2019-11-20 21:54:44

字体：大中小

来源：转载

供稿：网友

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 
}) 

上一篇：js切换光标示例代码

下一篇：jquery中常用的SET和GET$(”#msg”).html循环介绍

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注