如何在 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 - 现在在 body 中添加一个标题标签。
<h1 id="h">tutorialspoint.com</h1>
步骤 3 - 现在创建另一个 div 来显示输出,即元素的位置。
<div id="ans">(0,0)</div>
步骤 4 - 现在在 body 中添加 script 标签。
<script></script>
步骤 5 - 现在存储要查找位置的元素的引用。
var e = document.getElementById("h");
步骤 6 - 现在访问 Output 的 id 名称,并使用 innerHTML 通过 offsetTop 和 offsetLeft 显示元素的位置。
var m = document.getElementById("ans").innerHTML = "Position of element "+"(" + e.offsetTop + "," + e.offsetLeft + ")"; e.style.marginLeft = e.offsetLeft + 1;
示例 1
在这个示例中,我们将使用基本 offset 方法来查找元素的位置。
<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 - 现在在 body 中添加一个标题标签,并为其添加一个名为“h”的 id 属性。
<h1 id="h">tutorialspoint.com</h1>
步骤 3 - 现在创建另一个 div 来显示输出,即元素的位置。
<div id="ans">(0,0)</div>
步骤 4 - 现在在 body 中添加 script 标签。
<script></script>
步骤 5 - 现在存储要查找位置的元素的引用。
var e = document.getElementById("h");
步骤 6 - 现在用 HTML 元素初始化 getBoundingClientTect() 并将引用存储在一个变量中。
var cords = e.getBoundingClientRect();
步骤 7 - 使用 innerHTML 方法将元素的位置显示到浏览器窗口。
document.getElementById("ans").innerHTML = "Position of element "+"(" + 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 - 现在在 body 中添加一个标题标签,并将标题的位置设置为绝对。
<h1 id="h" style="position:absolute;">tutorialspoint.com</h1>
步骤 3 - 现在创建另一个 div 来显示输出,即元素的位置。
<div id="ans">(0,0)</div>
步骤 4 - 现在创建两个按钮,并使用 onclick 事件处理程序,其值为“down”和“right”。
<button onclick="d()">Move down</button> <button onclick="r()">Move right</button>
步骤 5 - 现在在 body 中添加 script 标签。
<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 游戏。它还用于向网页添加滚动动画和动画。例如,我们希望在用户滚动到页面特定位置时添加某个动画。