原生JS獲取DOM 節點到瀏覽器頂部的距離或者左側的距離
阿新 • • 發佈：2019-01-03
關於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>