编程 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 相关文章推荐

让iframe自适应高度（支持XHTML，支持FF）

Jul 24 Javascript

JavaScript中的其他对象

Jan 16 Javascript

node.js中的path.extname方法使用说明

Dec 09 Javascript

bootstrap table 服务器端分页例子分享

Feb 10 Javascript

jQuery Ajax调用WCF服务详细教程

Mar 31 Javascript

jquery移动点击的项目到列表最顶端的方法

Jun 24 Javascript

jQuery添加和删除指定标签的方法

Dec 16 Javascript

IE8 内存泄露(内存一直增长 )的原因及解决办法

Apr 06 Javascript

Angular父组件调用子组件的方法

Apr 02 Javascript

微信小程序下拉菜单效果的实例代码

May 14 Javascript

谈一谈vue请求数据放在created好还是mounted里好

Jul 27 Javascript

SpringBoot在yml配置文件中配置druid的操作

Nov 16 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