offset()函数用于设置或返回当前匹配元素相对于当前文档的偏移，也就是相对于当前文档的坐标。该函数只对可见元素有效。
该函数返回一个坐标对象(Object)，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。
与position()不同的是：offset()返回的是相对于当前文档的坐标，position()返回的是相对于其定位的祖辈元素的坐标。
该函数属于jQuery对象(实例)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;
}
#dv{
width: 200px;
height: 200px;
background-color: orange;
margin-left: 200px;
position: absolute;
}
</style>
<script src = "jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var divLeft = $("#dv").offset()
console.log(divLeft);//输出的结果是一个对象 ：Object {top: 21, left: 200}
var divLeft2 = $("#dv").offset().left;
console.log(divLeft2);//输出结果是 200 数字类型
var divLeft3 = $("#dv").css("left");
console.log(divLeft3);//输出结果是 0px 字符串类型，不包括margin ,border:
var divLeft4 = $("#dv").scrollLeft();
console.log(divLeft4);//输出的是 0 数字类型 获取的是卷曲出去的值
//offset()设置参数
//offset()传入参数的格式 {"left":100,"top":100}
$("#dv").offset({"left":100,"top":100});
setTimeout(function() {
$("#dv").offset({"left":"200","top":"200"});
}, 2000);
//传入的值可以是字符串，但是不能带px
});
})
</script>
</head>
<body>
<input type="button" name="" id="btn" value="显示效果" />
<div id="dv"></div>
</body>
</html>
原文地址：https://www.cnblogs.com/yswinwin/p/9515266.html
时间： 2024-10-16 02:58:24