注册登录

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

时间:2016-02-12 13:18 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【jquery获取div距离窗口和父级dv的距离示例】，下面是详细的讲解！

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 + 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离左边是多少像素

　　答：使用Jquery 获取DIV相对浏览器的边距，也就是绝对X,Y坐标，可以用offset()： $('div').offset().left;示例如下：创建Html元素本层相对浏览器的左边距为50px本层相对上一层的左边距为20px,所以相对浏览器边距为70px设置css样式 *{margin:0;}div... >>详细

　　相关问题：jquery 如何获得一个元素（比如div）的底部（或顶...

　　答：$(obj).offset().top - $(window).scrollTop() >>详细

　　相关问题：浏览器窗口滚动到一定距离，显示div中的内容，使用...

　　答：function getTop(){var top = $(document).scrollTop();if($(document).scrollTop()>1121){$("#paiming").css({'display':'block','top':top,});} else {$("#paiming").css('display','none');}setTimeout(getTop);}getTop();提供一个示例： #pa... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

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

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

关于jquery获取div距离窗口和父级dv的距离示例的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）