js如何取得DOM節點到瀏覽器頂部或左側的距離-js教程-PHP中文網

js如何取得DOM節點到瀏覽器頂部或左側的距離

青灯夜游

發布： 2019-01-05 11:40:02

轉載

6032 人瀏覽過

js如何取得DOM節點到瀏覽器頂部或左側的距離？這篇文章就跟大家介紹js取得DOM節點到瀏覽器頂部或左側距離的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

關於js取得dom 節點到瀏覽器頂或左部的距離，Jquery裡面有封裝好的offset().top/offset().left，只到父級的頂/左部距離position ().top/position().left。【推薦教學：JavaScript影片教學】

原生寫的話就是用取得節點，do while迴圈就可以了。程式碼如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生JS获取DOM 节点到顶部的距离</title>
</head>
<body>
   <ul>
       <li>11111</li>
       <li>11111</li>
       <li>11111</li>
       <li>11111</li>
       <li id="item">11111</li>
   </ul>
    <script>
        var dom = document.getElementById('item');
        var iTop = 0;
        do {
            iTop += dom.offsetTop;//如果是左侧就是offsetLeft
            dom = dom.parentNode //如果DOM 节点 的parentNode存在，把当前的节点赋予成parentNode；
       } while (dom.parentNode);
        console.log(iTop)
    </script>
</body>
</html>

登入後複製

以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！！！

以上是js如何取得DOM節點到瀏覽器頂部或左側的距離的詳細內容。更多資訊請關注PHP中文網其他相關文章！