Dado un documento HTML y la tarea es obtener la posición de cualquier elemento usando JavaScript. Utilice los siguientes pasos para obtener la posición:
Paso 1: Seleccionar un elemento: Antes de encontrar la posición, es necesario seleccionar el elemento HTML requerido. Cada elemento en HTML está estructurado en un formato de árbol conocido como DOM o Modelo de objetos de documento. En JavaScript, hay un objeto incorporado llamado objeto de documento que apunta a la raíz del árbol DOM. Significa que es posible acceder a todos los componentes de la página web.
El objeto de documento tiene varios métodos disponibles para encontrar un elemento particular dentro de la página HTML. Cada uno de estos métodos tiene un parámetro que podría usarse para encontrar el elemento requerido. Algunos de los métodos son:
- El método getElementsByTagName()
- El método getElementsByClassName()
- El método getElementById()
- El método getElementsByName()
- El método querySelector()
- El método querySelectorAll()
Paso 2: encontrar la posición del elemento: para obtener la ubicación de cualquier elemento HTML en el formato de coordenadas (x, y), se utilizan dos propiedades de documento:
- Propiedad offsetTop: Devuelve la posición superior en píxeles, en relación con la parte superior del elemento principal. Incluye la posición superior y el margen del elemento y el relleno superior, la barra de desplazamiento y el borde de su elemento principal.
Ejemplo:
html
<!DOCTYPE html>
<html>
<body>
<div id="target">
<p>Click the button</p>
<button onclick="getPoint()">
Click
</button>
<p id="output"></p>
</div>
<script>
function getPoint() {
var target = document
.getElementById("target");
var output = document
.getElementById("output");
output.innerHTML = "offsetTop: "
+ target.offsetTop;
}
</script>
</body>
</html>
- Producción:
offsetTop: 8
- Propiedad offsetLeft: Devuelve la posición izquierda en píxeles, relativa a la izquierda del elemento padre. Incluye la posición izquierda y el margen del elemento y el relleno izquierdo, la barra de desplazamiento y el borde de su elemento principal.
Ejemplo:
html
<!DOCTYPE html>
<html>
<body>
<div id="target">
<p>Click the button </p>
<button onclick="getPoint()">
Click
</button>
<p id="output"></p>
</div>
<script>
function getPoint() {
var target = document
.getElementById("target");
var output = document
.getElementById("output");
output.innerHTML = "offsetLeft: "
+ target.offsetLeft;
}
</script>
</body>
</html>
- Producción:
offsetLeft: 8
La combinación de estas dos propiedades en una para obtener el código para calcular las coordenadas de un elemento HTML se proporciona de la siguiente manera:
html
<!DOCTYPE html>
<html>
<body>
<div id="target">
<p>
Click the button to get the
co-ordinate of the element
</p>
<button onclick="getPoint()">
Get coordinate
</button>
<p id="output"></p>
</div>
<script>
function getPoint() {
var target = document
.getElementById("target");
var output = document
.getElementById("output");
output.innerHTML =
"Co-ordinate of the element:" +
" (" + target.offsetLeft + ", "
+ target.offsetTop + ")";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por piyush25pv y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA