Position operations in jQuery (offset, position, scroll)
offset()
returns the left and top values of the offset from the parent element. These two values are encapsulated in an object. If you want to get a specific value (use offset().left, offset().top), the parent element must There must be a positioning, otherwise the value of the distance document is returned
<style>
* {
margin: 0;
}
.father {
position: relative;//给父元素设置定位
width: 500px;
height: 500px;
background-color: black;
}
.son {
margin-left: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jQuery.min.js"></script>//引入jQuery文件
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function() {
var width = $('.son').offset();
console.log(width);//{top: 0, left: 20}
var height= $('.son').offset().left;
var height1= $('.son').offset().top;
console.log(height);//20
console.log(height1);//0
})
</script>
</body>