html 距离窗口页面距离代码,JavaScript_jquery获取div距离窗口和父级dv的距离示例，jquery中jquery.offset().top / left用 - phpStudy...

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:

a

innerBox

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:

a

innerBox

js:

$(function(){

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

})相关阅读:

.NET MVC中ViewData,ViewBag和TempData的区别浅析

JavaScript中Date对象的常用方法示例

基于C#实现的三层架构实例

Linux下创建nginx脚本-start、stop、reload…

javascript限制用户只能输汉字中文的方法

CSS3实现闪烁动画效果的方法

MAC新手用户如何开关Macbook键盘灯

Linux使用svn时报错Can't convert string from的解决方法

基于Android XML解析与保存的实现

Android开发之Android studio的安装与使用

ASP.NET数据库缓存依赖实例分析

详解C++编程中表达式的语义与计算顺序

java实现从网上下载图片到本地的方法

Yii使用smsto短信接口的函数demo示例