如何在 JavaScript 中查找 HTML 元素的位置?
概述
JavaScript 提供了各种方法来操作和获取有关 HTML 元素的信息。从这几种方法中，JavaScript 有自己的预定义方法，它们返回 HTML 元素的特定坐标或位置。这两个方法是 offsetLeft 和 offsetTop，这两个方法返回 HTML 元素的确切位置。JavaScript 还提供了另一个函数 getBoundingClientRect()，该方法也提供与 offset 方法相同的结果。getBoundingRect() 有四个属性，即 top、left、right 和 bottom，而 offset 只有两个属性，即 left 和 top。
语法
获取元素位置的语法是 −
getBoundingClientRect() − 它是 JavaScript 的预定义函数，当连接到元素时，它会返回元素相对于浏览器窗口的位置。 getBoundingClientRect 有 cords.top、cords.left、cords.bottom、cords.height、cords.height、cords.right 四个属性，其中 cords 是 getBoundingClientRect() 函数的引用变量。
var cords = e.getBoundingClientRect();
offsetType − offset 是 JavaScript 中预定义的函数，它返回元素的位置，例如 offsetLeft 和 offsetTop。
"(" + elementHTML.offsetTop + "," + elementHTML.offsetLeft + ")"
算法 1
步骤 1 − 在文本编辑器上创建一个 HTML 文件，并向文件添加 HTML 样板。
步骤 2 − 现在向正文添加标题标签。
<h1 id="h">tutorialspoint.com</h1>
步骤 3 − 现在创建另一个 div 以将输出显示为元素的位置。
<div id="ans">(0,0)</div>
步骤 4 − 现在将脚本标记添加到正文。
<script></script>
步骤 5 − 现在存储我们必须找到其位置的元素的引用。
var e = document.getElementById("h");
步骤 6 − 现在访问输出的 id 名称，并使用 innerHTML 通过 offsetTop 和 offsetLeft 显示元素的位置。
var m = document.getElementById("ans").innerHTML = "元素的位置 "+"(" + e.offsetTop + "," + e.offsetLeft + ")";
e.style.marginLeft = e.offsetLeft + 1;
示例 1
在此示例中，我们将使用基本偏移方法来查找元素的位置。
<html>
<head>
<title> finding the element position </title>
</head>
<body>
<h1 id="h">tutorialspoint.com</h1>
<div id="ans" style="padding: 0.2rem;background-color: green;display: inline-block;color: white;">(0,0)</div>
<script>
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "Position of element "+"(" + e.offsetTop + "," + e.offsetLeft + ")";
e.style.marginLeft = e.offsetLeft + 1;
</script>
</body>
</html>
算法 2
步骤 1 − 在文本编辑器上创建一个 HTML 文件，并向文件添加 HTML 样板。
步骤 2 − 现在向正文添加标题标签，并向其添加名为"h"的 id 属性。
<h1 id="h">tutorialspoint.com</h1>
步骤 3 − 现在创建另一个 div 以将输出显示为元素的位置。
<div id="ans">(0,0)</div>
步骤 4 − 现在将脚本标签添加到正文。
<script></script>
步骤 5 − 现在存储我们必须找到位置的元素的引用。
var e = document.getElementById("h");
步骤 6 − 现在使用 HTML 元素初始化 getBoundingClientTect() 并将引用存储在变量中。
var cords = e.getBoundingClientRect();
第 7 步 - 使用 innerHTML 方法将元素的位置显示到浏览器窗口。
document.getElementById("ans").innerHTML = "元素的位置 "+"(" + cords.top + "," + cords.left + ")";
示例 2
在此示例中，我们将使用内置函数 getBoundingClientRect() 来获取 HTML 元素的位置。
<html>
<head>
<title> finding the elemet position </title>
</head>
<body>
<h1 id="h">tutorialspoint.com</h1>
<p> (using getBoundingClientRect) </p>
<div id="ans" style="padding: 0.2rem;background-color: green;display: inline-block;color: white;">(0,0)</div>
<script>
var e = document.getElementById("h");
var cords = e.getBoundingClientRect();
document.getElementById("ans").innerHTML = "Position of element "+"(" + cords.top + "," + cords.left + ")";
</script>
</body>
</html>
算法 3
步骤 1 − 在文本编辑器上创建一个 HTML 文件，并向文件添加 HTML 样板。
步骤 2 − 现在向正文添加标题标签，并将标题的位置设置为绝对位置。
<h1 id="h" style="position:absolute;">tutorialspoint.com</h1>
步骤 3 − 现在创建另一个 div 以将输出显示为元素的位置。
<div id="ans">(0,0)</div>
步骤 4 − 现在创建两个按钮，使用 onclick 事件处理程序，值为"down"和"right"。
<button onclick="d()">向下移动</button> <button onclick="r()">向右移动</button>
步骤 5 − 现在将脚本标记添加到正文。
<script></script>
步骤 6 − 创建一个箭头函数作为 d() 并存储我们必须找到位置的元素的引用，并使用下面的进一步代码使动态位置变化显示在屏幕上。
d = () => {
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "(" + e.offsetTop + "," + e.offsetLeft + ")";
var e = document.getElementById("h");
e.style.marginTop = e.offsetTop + 1;
}
步骤 7 − 创建另一个箭头函数作为 r() 并存储我们必须找到位置的元素的引用，并使用下面的进一步代码使动态位置变化显示在屏幕上。
r = () => {
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "(" + e.offsetTop + "," + e.offsetLeft + ")";
var e = document.getElementById("h");
e.style.marginLeft = e.offsetLeft + 1;
}
步骤 8 - 动态位置查找器已准备就绪。
示例 3
在此示例中，我们将借助按钮创建可移动文本，并创建一个实时位置变换器，当用户更改文本位置时，实时位置将显示在屏幕上。
<html>
<head>
<title> finding the elemet position </title>
</head>
<body>
<h1 id="h" style="position:absolute;">tutorialspoint.com</h1>
<div id="ans" style="padding: 0.2rem;background-color: green;display: inline-block;color: white;">(0,0)</div>
<button onclick="d()">Move down</button>
<button onclick="r()">Move right</button>
<script>
d = () => {
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "(" + e.offsetTop + "," + e.offsetLeft + ")";
var e = document.getElementById("h");
e.style.marginTop = e.offsetTop + 1;
}
r = () => {
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "(" + e.offsetTop + "," + e.offsetLeft + ")";
var e = document.getElementById("h");
e.style.marginLeft = e.offsetLeft + 1;
}
</script>
</body>
</html>
下图显示了上述示例的输出，在浏览器上加载时，该输出显示了元素的实时位置，其中有两个按钮，分别为向下移动和向右移动。当用户单击向下移动按钮时，文本"tutorialspoint.com"将随着页面绿色部分中位置值的变化而向下移动。文本"tutorialspoint.com"本质上是可移动的。如下图所示，它显示了文本"tutorialspoint.com"的位置 (83,62)。
结论
元素的位置坐标主要用于 JavaScript 游戏。它还用于将滚动动画和动画添加到网页。例如，我们希望在用户滚动到页面的某个位置时添加某个动画。
