js에서 DOM 노드에서 브라우저의 상단 또는 왼쪽까지의 거리를 얻는 방법-JS 튜토리얼-php.cn

js에서 DOM 노드에서 브라우저의 상단 또는 왼쪽까지의 거리를 얻는 방법

青灯夜游

풀어 주다： 2019-01-05 11:40:02

앞으로

6033명이 탐색했습니다.

JS에서 DOM 노드에서 브라우저 상단 또는 왼쪽까지의 거리를 어떻게 구하나요? 이 기사에서는 js를 사용하여 DOM 노드에서 브라우저의 상단 또는 왼쪽까지의 거리를 얻는 방법을 소개합니다. 이는 특정 참고 값을 가지고 있으므로 도움이 될 것입니다.

dom 노드의 상단 또는 왼쪽에서 브라우저까지의 거리를 가져오는 js에 대해 Jquery는 offset().top/offset().left를 캡슐화했으며 상위 노드의 상단/왼쪽까지의 거리만 위치( ).top /position().left. [추천 튜토리얼: JavaScript 동영상 튜토리얼]

네이티브로 작성한다면 노드를 구하고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!