<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>12.7jQuery的offset()方法</title>
<!--
offset()方法:返回或者设置匹配元素的相对于文档的偏移(位置)
注意：返回第一个匹配元素偏移坐标
该方法的对象包含两个属性:top和left，此方法只对可见元素生效
-->
<style>
#div1{
width:200px;
height:200px;
background-color:#CCC;
position:relative;
}
*{
padding:0;
margin:0;
}
#p1{
width:100px;
height:100px;
background-color:#FF3;
padding:10px;
border:20px solid green;
margin:20px;
position:absolute;
}
</style>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1 获取div1的位置
$('#btn1').click(weizhi);
//位置函数
function weizhi(){
var text='';
var top=$('#div1').offset().top;
var left=$('#div1').offset().left;
text = 'div1的位置top:'+top+',left:'+left;
alert(text);
}
//2 设置div1的padding后div1的位置
$('#btn2').click(function(){
$('#div1').css('padding','20px');
weizhi();
});
//3 设置div1的border后div1的位置
$('#btn3').click(function(){
$('#div1').css('border','30px solid red');
weizhi();
});
//4 设置div1的margin后div1的位置
$('#btn4').click(function(){
$('#div1').css('margin','40px');
weizhi();
});
// 获取p1的位置
$('#btn5').click(function (){
var text='';
var top=$('#p1').offset().top;
var left=$('#p1').offset().left;
text = 'p1的位置top:'+top+',left:'+left;
alert(text);
});
});
</script>
</head>
<body>
<div id="div1">
<p id="p1">p</p>
</div>
<input type="button" id="btn1" value="获取div1的位置"><br>
<input type="button" id="btn2" value="设置div1的padding"><br>
<input type="button" id="btn3" value="设置div1的border"><br>
<input type="button" id="btn4" value="设置div1的margin"><br>
<input type="button" id="btn5" value="获取p1的位置"><br>
</body>
</html>
默认效果
单击获取div1按钮
单击设置padding按钮
单击设置div1的margin按钮
单击设置div1的border按钮
单击获取p1的位置按钮
