資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學獲取HTML元素的位置(X,Y)
HTML文件的X, Y位置分別表示水平方向(X)和垂直方向(Y)的位置。這裡，我們將看到兩個獲取位置的例子，即：
- 獲取網頁上特定文字的位置。
- 獲取網頁上按鈕的位置。
獲取網頁上特定文字的位置
為了獲取網頁上特定文字的位置，我們將使用`getBoundingClientRect()`方法。它提供關於元素大小及其相對於視窗位置的資訊。這將給我們滑鼠懸停時的X和Y座標。
var rect = element.getBoundingClientRect(); document.getElementById('text').innerHTML = 'X Coordinate= ' + rect.x + '<br>' + 'Y Coordinate = ' + rect.y;
值將在滑鼠懸停時顯示在div中。
<div onmouseover="getPositionXY(this)"> X,Y Position = <p id='text'></p> </div>
示例
讓我們來看一下示例：
<!DOCTYPE html> <html> <head> <title>Example X,Y Coordinate</title> <script> function getPositionXY(element) { var rect = element.getBoundingClientRect(); document.getElementById('text').innerHTML = 'X Coordinate= ' + rect.x + '<br>' + 'Y Coordinate = ' + rect.y; } </script> </head> <body> <h1>Position</h1> <p>To get the position, move the mouse cursor over the below text.</p> <div onmouseover="getPositionXY(this)"> X,Y Position = <p id='text'></p> </div> </body> </html>
輸出
將游標放在文字上時，將顯示X, Y座標。
獲取網頁上按鈕的位置
在這個例子中，我們將獲取網頁上按鈕的位置。為了獲取位置，我們將使用`getBoundingClientRect()`方法。它提供關於元素大小及其相對於視窗位置的資訊。這將給我們點選時的X和Y座標。
function getPositionXY(element) { var rect = element.getBoundingClientRect(); document.getElementById('demo').innerHTML = 'X Coordinates = ' + rect.x + ', ' + 'Y Coordinates = ' + rect.y }
值將在滑鼠懸停時顯示在div中。
<p>Get the Coordinates of any of the button positioned below:</p> <button id='button1' onclick="getPositionXY(this)">Button 1</button> <button id='button1' onclick="getPositionXY(this)">Button 2</button> <button id='button1' onclick="getPositionXY(this)">Button 3</button> <button id='button1' onclick="getPositionXY(this)">Button 4</button> <br><br> <button id='button1' onclick="getPositionXY(this)">Button 5</button> <button id='button1' onclick="getPositionXY(this)">Button 6</button> <button id='button1' onclick="getPositionXY(this)">Button 7</button> <button id='button1' onclick="getPositionXY(this)">Button 8</button>
示例
讓我們來看一下示例：
<!DOCTYPE html> <html> <head> <title>Coordinates of Buttons</title> <script> function getPositionXY(element) { var rect = element.getBoundingClientRect(); document.getElementById('demo').innerHTML = 'X Coordinates = ' + rect.x + ', ' + 'Y Coordinates = ' + rect.y } </script> </head> <body> <h1>Coordinates</h1> <p>Get the Coordinates of any of the button positioned below:</p> <button id='button1' onclick="getPositionXY(this)">Button 1</button> <button id='button1' onclick="getPositionXY(this)">Button 2</button> <button id='button1' onclick="getPositionXY(this)">Button 3</button> <button id='button1' onclick="getPositionXY(this)">Button 4</button> <br><br> <button id='button1' onclick="getPositionXY(this)">Button 5</button> <button id='button1' onclick="getPositionXY(this)">Button 6</button> <button id='button1' onclick="getPositionXY(this)">Button 7</button> <button id='button1' onclick="getPositionXY(this)">Button 8</button> <p id='demo'></p> </body> </html>
輸出
點選任意按鈕以獲取其位置。
更新於：2022年11月1日
5K+ 次瀏覽
廣告