如何在 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 游戏。它还用于向网页添加滚动动画和动画。例如,我们希望在用户滚动到页面特定位置时添加某个动画。

更新于: 2023年10月13日

2K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告