jquery中的位置方法offset () 、offsetParent ()、position () 的区别与使用
程序员文章站
2022-05-11 13:14:06
...
ps:这三个位置属性不接受任何参数
1.position():
获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 注：offset parent指离该元素最近的而且被定位过的祖先元素 )
2.offset():
在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于document。
3.offsetParent():
取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
margin:100px auto;
position: relative;
}
#div2{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div class="aa"></div>
<div id="div2" class="aa"></div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
console.log( $('#div2').offset());
console.log( $('#div2').offsetParent());
console.log( $('#div2').position());
</script>
</body>
</html>
推荐阅读
-
jquery append()方法教程与html()方法教程的区别及使用介绍
-
jQuery中ajax的使用与缓存问题的解决方法
-
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
-
JQuery中的常用事件、对象属性与使用方法分析
-
Jquery中offset()和position()的区别分析
-
jQuery中操作属性的方法attr与prop的区别
-
jQuery中bind,live,delegate与one方法的用法及区别解析
-
jQuery实现获取table中鼠标click点击位置行号与列号的方法
-
sql中varchar和nvarchar的区别与使用方法
-
深入理解jQuery中live与bind方法的区别