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】

三、獲取元素到父元素的距離