So ermitteln Sie den Abstand vom DOM-Knoten zur oberen oder linken Seite des Browsers in js-js-Tutorial-php.cn

So ermitteln Sie den Abstand vom DOM-Knoten zur oberen oder linken Seite des Browsers in js

青灯夜游

Freigeben： 2019-01-05 11:40:02

nach vorne

6033 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!