js에서 DOM 노드에서 브라우저의 상단 또는 왼쪽까지의 거리를 얻는 방법
- 青灯夜游앞으로
- 2019-01-05 11:40:026100검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제