一、获取元素到窗口的距离
1.距离顶部,左边的距离,jQuery方法:offset()
- 返回或设置匹配元素相对于文档的偏移(位置)。
- 获取:$(selector).offset() 设置:$(selector).offset(value) value比如{top:100,left:0}
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
margin: 40px 50px;
border: 1px solid blue;
position: relative;
}
.box {
position: absolute;
top: 50px;
left: 100px;
width: 200px;
height: 300px;
border: 1px solid red;
}
</style>
<div class="container">
<div class="box"></div>
</div>
<script>
// offset() 返回或设置匹配元素相对于文档的偏移(位置)。
console.log($(‘.box‘).offset()); // {top: 91, left: 151}
// 设置传入对象参数:{left: m, top: m}
$(‘.box‘).offset({left:80, top: 80});
</script>
2.元素距离文档底部的距离
3.元素距离可视窗口底部的距离
二、 一些距离方法
- $(document).height() // 整个网页的文档高度
- $(window).height(); // 浏览器可视窗口的高度
参考文章:jQuery获取文档高度和窗口高度汇总【https://blog.csdn.net/qq_21417123/article/details/80105620】
三、获取元素到父元素的距离
原文:https://www.cnblogs.com/xinghong/p/11397465.html