编程 Javascript

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

Posted in Javascript onOctober 10, 2013

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的距离示例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript判断单选框或复选框是否选中方法集锦

Apr 04 Javascript

第一个JavaScript入门基础 document.write输出

Feb 22 Javascript

JSONP 跨域访问代理API-yahooapis实现代码

Dec 02 Javascript

js禁止页面使用右键(简单示例代码)

Nov 13 Javascript

JS实现可拖曳、可关闭的弹窗效果

Sep 26 Javascript

JS实现HTML标签转义及反转义

Apr 14 Javascript

Vue学习之路之登录注册实例代码

Jul 06 Javascript

关于vue中的ajax请求和axios包问题

Apr 19 Javascript

vue动态设置img的src路径实例

Sep 18 Javascript

实例讲解JS中pop使用方法

Jan 27 Javascript

JS重学系列之聊聊new操作符

Mar 04 Javascript

微信小程序实现同时上传多张图片

Feb 03 Javascript

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

Oct 09 #Javascript

JavaScript动态创建div属性和样式示例代码

Oct 09 #Javascript

javascript中的document.open()方法使用介绍

Oct 09 #Javascript

js控制页面控件隐藏显示的两种方法介绍

Oct 09 #Javascript

js onload事件不起作用示例分析

Oct 09 #Javascript

js 控制图片大小核心讲解

Oct 09 #Javascript

方便实用的jQuery checkbox复选框全选功能简单实例

Oct 09 #Javascript