jQuery Position方法使用和兼容性
时间:2019-03-31
本文章向大家介绍jQuery Position方法使用和兼容性,主要包括jQuery Position方法使用和兼容性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、position方法
jquery api地址:http://jquery.cuishifeng.cn/position.html
position方法获取匹配元素相对父元素的偏移。
2、说明
2.1 与offset()区别
.offset()是获得该元素相对于documet的当前坐标
.position()方法可以取得元素相对于父元素的偏移位置,父元素为该元素最近的而且被定位过的祖先元素。
2.2 值计算
.元素本身所占用的边框,边距和填充的大小不计。
.父元素的边框和边距不计,父元素的填充计算在内。
3、示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery position()示例</title> <style> html { line-height: 1.15; } /*父元素--相对定位*/ .parent { position: relative; width: 200px; height: 400px; /*父元素的margin不计算在内*/ margin-top: 10px; /*父元素的border不计算在内*/ border: 1px solid green; /*父元素的padding计算在内*/ padding-top: 10px; } .child-1 { width: 100px; height: 100px; margin: 0 auto; border: 1px solid #2E8DED; } .child-2 { width: 100px; height: 100px; /*子元素的margin不计算在内*/ margin: 10px auto 0; /*子元素的border不计算在内*/ border: 1px solid #2E8DED; /*子元素的padding不计算在内*/ padding: 10px; } </style> </head> <body> <div class="parent"> <p class="child-1"> first child </p> <p class="child-2" id="no-2"> second child </p> </div> <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { //获取child-2子元素距离父元素的距离 console.log($('#no-2').position().top); }); </script> </body> </html>
4、注意
对于文字的line-height等属性,浏览器(chrome、IE、Firefox)默认大小不一致,因此不同的浏览器position()在计算尺寸时会存在不一致,因此必须保证所有浏览器一致的line-height等属性。
示例代码为没有设置line-height
的例子,position()在不同的浏览器上计算出的值不一样。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery position()示例</title> <style> html { /*必须给予一致的设置,否则position()计算值不同*/ /*line-height: 1.15;*/ } /*父元素--相对定位*/ .parent { position: relative; width: 200px; height: 400px; /*父元素的margin不计算在内*/ margin-top: 10px; /*父元素的border不计算在内*/ border: 1px solid green; /*父元素的padding计算在内*/ padding-top: 10px; } .child-1 { width: 100px; height: 100px; margin: 0 auto; border: 1px solid #2E8DED; } .child-2 { width: 100px; height: 100px; /*子元素的margin不计算在内*/ margin: 10px auto 0; /*子元素的border不计算在内*/ border: 1px solid #2E8DED; /*子元素的padding不计算在内*/ padding: 10px; } </style> </head> <body> <div class="parent"> 文字文字 <p class="child-1"> first child </p> <p class="child-2" id="no-2"> second child </p> </div> <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { //获取child-2子元素距离父元素的距离 console.log($('#no-2').position().top); }); </script> </body> </html>
总结
以上所述是小编给大家介绍的jQuery Position方法使用和兼容性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 【Java学习笔记之六】java三种循环(for,while,do......while)的使用方法及区别
- 类A是公共的,应在名为A.java的文件中声明错误
- 逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])
- 【Java学习笔记之七】java函数的语法规则总结
- BZOJ 3038: 上帝造题的七分钟2【线段树区间开方问题】
- BZOJ 3211: 花神游历各国【线段树区间开方问题】
- WP、Win10开发或者WPF开发时绘制自定义窗体~例如:一个手机
- 【Java学习笔记之八】JavaBean中布尔类型使用注意事项
- BZOJ 1597: [Usaco2008 Mar]土地购买【斜率优化+凸包维护】
- BZOJ 1046: [HAOI2007]上升序列【贪心+二分状态+dp+递归】
- 【Java学习笔记之九】java二维数组及其多维数组的内存应用拓展延伸
- BZOJ 1293: [SCOI2009]生日礼物【单调队列】
- Javascript缓存投毒学习与实战
- 【Java学习笔记之十】Java中循环语句foreach使用总结及foreach写法失效的问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode009|只出现一次的数字
- 丢弃掉那些 BeanUtils 工具类吧,MapStruct 是真香!!!
- 还在「黑盒炼丹」? 教你如何实现一行代码透视炼丹过程
- SpringCloud Alibaba微服务实战十九 - 集成RBAC授权
- 混合算法(GA+TS)求解作业车间调度问题(JSP)-禁忌搜索部分
- 打卡群刷题总结0810——从前序与中序遍历序列构造二叉树
- JavaScript性能优化
- Python+Excel+Word一秒制作百份合同
- SQL 订单揽收统计
- LeetCode11|搜索二维矩阵
- LeetCode14|合并排序的数组
- LeetCode12|两个数组的交集
- LeetCode10|只出现一次的数字II
- LeetCode15|有序数组中出现次数超过25%的元素
- 小米5(gemini:双子座)刷机