18、位置
2022-09-01 本文已影响0人
一直流浪
方法：
- offset()
- 获取一个对象，对象里面包含top和left；offset()获取元素距离document的位置
- position()
- 获取一个对象，对象里面包含top和left；position()获取元素距离定位父级(offsetParent)的位置
代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 400px;
height: 400px;
border: 10px solid red;
position: relative;
top: 10px;
left: 10px;
}
.son{
width: 100px;
height: 100px;
border: 10px solid green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="offset()" />
<input type="button" id="btn2" value="position()" />
<div class="father" id="father">
<div class="son" id="son">
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//1. offset()
//获取一个对象，对象里面包含top和left
//offset()获取元素距离document的位置
$('#btn1').click(function(){
console.log($('#son').offset()); //top:143 ,left:120
});
//2.position()
//获取一个对象，对象里面包含top和left
//position()获取元素距离定位父级(offsetParent)的位置
$('#btn2').click(function(){
console.log($('#son').position()); //top:100,left:100
});
})
</script>
