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 相关文章推荐
javascript事件问题
Sep 05 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
JavaScript 数组详解
Oct 10 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
javascript三种代码注释方法
Jun 02 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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.4中json_encode中文转码的变化小结
2013/01/30 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
js Dialog 实践分享
2012/10/22 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
js实现五星评价功能
2017/03/08 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
python字符串连接方法分析
2016/04/12 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Python 在局部变量域中执行代码
2020/08/07 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
广告学专业毕业生自荐信
2014/05/28 职场文书
临床医学专业求职信
2014/08/08 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
python playwright之元素定位示例详解
2022/07/23 Python