jQuery offset() 方法详解
jQuery offset() 方法用于获取或设置匹配元素相对于文档的偏移（位置）。本文将详细讲解 jQuery offset() 方法的语法、返回、示例等内容。
语法
$(selector).offset()
返回值
返回一个对象，包含两个整型属性： 和 left。
示例1：获取元素的偏移位置
以下示例演示如何使用 offset() 方法获取元素的偏移位置：
<!DOCTYPE html>
<html>
<head>
<title>jQuery offset() 方法示例</title>
< src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
$(document).ready(function(){
var offset = $("#box").offset();
console.log("top: " + offset.top + ", left: " + offset.left);
});
</script>
</body>
</html>
在上面的示例中，使用 offset() 方法获取 id 为 的元素的偏移位置，并将结果输出到控制台。
示例2：设置元素的偏移位置
以下示例演示如何使用 offset() 方法设置元素的偏移位置：
<!DOCTYPE html>
<html>
<head>
<title>jQuery offset() 方法示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="move">移动</button>
<script>
$(document).ready(function(){
$("#move").click(function(){
$("#box").offset({top: 100, left: 100});
});
});
</script>
</body>
</html>
在上面的示例中，使用 offset() 方法设置 id 为 box 的元素的偏移位置为 {top: 100, left: 100}，并在点击按钮时移动元素。
总的来说，jQuery offset() 方法是一个非常有用的方法，可以用于获取或设置元素的偏移位置。通过上述攻略，可以轻松地使用 offset() 方法获取或设置元素的偏移位置。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery–offset()方法 - Python技术站
微信扫一扫 
支付宝扫一扫 