ホームページ > 記事 > ウェブフロントエンド > JSでDOMノードからブラウザの上部または左側までの距離を取得する方法
JSでDOMノードからブラウザの上部または左側までの距離を取得する方法
- 青灯夜游転載
- 2019-01-05 11:40:026008ブラウズ
js で DOM ノードからブラウザの上部または左側までの距離を取得するにはどうすればよいですか?この記事では、js を使用して DOM ノードからブラウザの上部または左側までの距離を取得する方法を紹介します。必要な方は参考にしていただければ幸いです。
dom ノードからブラウザの上部または左端までの距離を取得するための js については、Jquery にはカプセル化された offset().top/offset().left があります。これは、ブラウザの上部または左端までの距離のみです。親位置の上/左 ().top/position().left。 [推奨チュートリアル: JavaScript ビデオ チュートリアル ]
ネイティブで作成する場合は、get ノードと 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 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
以上がJSでDOMノードからブラウザの上部または左側までの距離を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。