js如何取得DOM節點到瀏覽器頂部或左側的距離
- 青灯夜游轉載
- 2019-01-05 11:40:026060瀏覽
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中文網其他相關文章！
陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除