📅 最后修改于: 2023-12-03 14:43:15.572000 🧑 作者: Mango
jQuery 的 offset() 方法用于获取或设置匹配元素相对于文档的偏移值。可以获取相对于文档最左上角的距离，单位为像素。
$(selector).offset()
$(selector).offset({top: value, left: value})
该方法返回一个对象，包括两个属性： top 和 left。分别代表该元素相对于文档左侧的距离和顶端的距离。
假设有如下 HTML 结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery offset() 方法示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
left: 100px;
top: 100px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script>
$(document).ready(function(){
let offset = $("#box").offset();
console.log("top：" + offset.top + "px; left：" + offset.left + "px");
$("#change-offset").click(function(){
$("#box").offset({top: 200, left: 200});
console.log("设置偏移：top:200px, left:200px");
let offset = $("#box").offset();
console.log("top：" + offset.top + "px; left：" + offset.left + "px");
});
});
</script>
</head>
<body>
<div id="box">这是一个用于测试 offset() 方法的 div</div>
<button id="change-offset">改变元素的偏移量</button>
</body>
</html>
运行后会看到一个红色的正方形框在页面中心，下面有一个按钮。
点击按钮后，会改变正方形框的位置到页面左上角。
输出结果：
top: 100px; left: 100px;
设置偏移：top:200px, left:200px
top: 200px; left: 200px
offset() 方法可用于获取或设置匹配元素的偏移量，根据具体需求选择使用。