本节我们来看一下offset和position，这两个方法稍微有一点绕，请大家认真理解。
语法如下：
- $('#btn').offset();//取元素的绝对位置，相对于浏览器的左上角。
- $('window').position();//取元素的相对位置，相对于该元素的带有position定位的上级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./jquery.js"></script>
<title>Jquery中元素的尺寸与位置操作</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.father {
background-color: rgb(12, 148, 182);
width: 200px;
height: 200px;
padding: 50px;
margin-bottom: 50px;
margin-left: 100px;
}
.children {
height: 150px;
width: 150px;
background-color: #ffffff;
line-height: 150px;
text-align: center;
}
</style>
<body>
<div class="father" style="position:relative">
<div class="children"></div>
</div>
<div class="father">
<div class="children"></div>
</div>
</body>
<script>
$(document).ready(function () {
$(".children").each(function () {
var html;
html = "left:" + $(this).position().left;
html += "top:" + $(this).position().top;
$(this).html(html);
console.log($(this).offset());
})
})
</script>
</html>
解释一下：
以上我们创建了两个div盒子，它们的高度为200px，宽度为200px，内边距为50px，左外边距为100px，下外边距为50px。
所以：
由于内边距为50，大盒子的宽高最终都是300px。
第一个大盒子里面的小盒子距离大盒子的左边为50px，距离浏览器的左边为150px，距离大盒子的顶边为50px，距离浏览器的顶边为50px。
第二个大盒子里面的小盒子距离大盒子的左边为50px，距离浏览器的左边为150px，距离大盒子的顶边为50px，距离浏览器的顶边为400px。
第一个大盒子使用了position:relative定位。
以上实验得出的结论是：
第一个大盒子里面的小盒子通过position方法取得左边为50，即：相对大盒子左边的距离，因为大盒子使用了position:relative定位。
第二个大盒子里面的小盒子通过position方法取得左边为150，即：相对于浏览器左边的距离，因为第二个大盒子没有使用position:relative定位。
同理，第一个大盒子中的小盒子顶边也相对于父盒子，为50。第二个大盒子中的小盒子的顶边相对于浏览器，顶边为400px。
以上描述虽有一些绕嘴，但总算是表达清楚了，在实际编程过程中这个问题有很多人搞不清楚，所以说的啰嗦了一点。
二、offset
在代码中我们分别通过offset取出了它们的位置信息，输出结果如上图所示。
offse取出的位置都是相对于浏览器的，所以：
第一个小盒子的位置是：顶边为50，左边为150.
第二个小盒子的位置是：顶边为400，左边为150.
ok，以上就是Jquery中 offset和position取元素位置的讲解，请大家把代码复制下来认真理解一下。
|
窥视卡
雷达卡
发表于 2023-1-26 21:50:57
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 10:40:15
