資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 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 遊戲。它還用於向網頁新增滾動動畫和動畫。例如，我們希望在使用者滾動到頁面特定位置時新增某個動畫。
2K+ 瀏覽量
