Heim >Web-Frontend >js-Tutorial >So ermitteln Sie den Abstand vom DOM-Knoten zur oberen oder linken Seite des Browsers in js
Wie erhalte ich den Abstand vom DOM-Knoten zur oberen oder linken Seite des Browsers in js? In diesem Artikel erfahren Sie, wie Sie mit js den Abstand vom DOM-Knoten zur oberen oder linken Seite des Browsers ermitteln. Ich hoffe, dass er für Sie hilfreich ist.
Damit js den Abstand vom Dom-Knoten zum oberen oder linken Rand des Browsers ermittelt, hat Jquery offset().top/offset().left gekapselt, was nur den Abstand zum oberen/linken Rand angibt die übergeordnete Position ().top/position().left. [Empfohlenes Tutorial: JavaScript-Video-Tutorial]
Um nativ zu schreiben, verwenden Sie einfach „get nodes“ und führen Sie eine while-Schleife aus. Der Code lautet wie folgt:
<!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>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonSo ermitteln Sie den Abstand vom DOM-Knoten zur oberen oder linken Seite des Browsers in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!