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 
})
Javascript 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 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
You might like
php5中类的学习
2008/03/28 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
日期 时间js控件
2009/05/07 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
详解Python装饰器由浅入深
2016/12/09 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python range与enumerate函数区别解析
2020/02/28 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
《长城和运河》教学反思
2014/04/14 职场文书
文明好少年事迹材料
2014/08/19 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
意向协议书
2015/01/27 职场文书
单位考核聘任报告
2015/03/02 职场文书
2019公司管理制度
2019/04/19 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python