06 - 获取元素到父元素、窗口的距离

一、获取元素到窗口的距离

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】

三、获取元素到父元素的距离