原生JS獲取DOM 節點到瀏覽器頂部的距離或者左側的距離

h祝h發表於2019-01-03
JS瀏覽器

關於js獲取dom 節點到瀏覽器頂/左部的距離，Jquery裡面有封裝好的offset().top/offset().left，只到父級的頂/左部距離position().top/position().left；

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

<!DOCTYPE html>
<html lang="en">
<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>

 

相關文章