jQuery x y coordenadas del documento del objeto DOM
-
05-07-2019 - |
Pregunta
Necesito obtener las coordenadas X, Y (relativas a la parte superior / izquierda del documento) para un elemento DOM. No puedo localizar ningún complemento o propiedad o método de jQuery que pueda darme estos. Puedo obtener la parte superior e izquierda del elemento DOM, pero eso puede ser relativo a su contenedor / padre actual o al documento.
Solución
puede usar Dimensiones plugin [En desuso ... incluido en jQuery 1.3.2+]
desplazamiento ()
Obtenga el desplazamiento actual del primer elemento coincidente, en píxeles, en relación con el documento .position ()
Obtiene la posición superior e izquierda de un elemento en relación con su elemento principal desplazado .
sabiendo esto, entonces es fácil ... (usando mi pequeño proyecto svg como un página de ejemplo )
var x = $("#wrapper2").offset().left;
var y = $("#wrapper2").offset().top;
console.log('x: ' + x + ' y: ' + y);
salida:
x: 53 y: 177
espero que ayude a lo que estás buscando.
aquí hay una imagen de desplazamiento () y posición ()
usando XRay
??
usando Desarrollador web barra de herramientas
??
Otros consejos
Mi solución es un complemento con " soluciones provisionales " : + D. ¡Pero funciona!
jQuery.fn.getPos = function(){
var o = this[0];
var left = 0, top = 0, parentNode = null, offsetParent = null;
offsetParent = o.offsetParent;
var original = o;
var el = o;
while (el.parentNode != null) {
el = el.parentNode;
if (el.offsetParent != null) {
var considerScroll = true;
if (window.opera) {
if (el == original.parentNode || el.nodeName == "TR") {
considerScroll = false;
}
}
if (considerScroll) {
if (el.scrollTop && el.scrollTop > 0) {
top -= el.scrollTop;
}
if (el.scrollLeft && el.scrollLeft > 0) {
left -= el.scrollLeft;
}
}
}
if (el == offsetParent) {
left += o.offsetLeft;
if (el.clientLeft && el.nodeName != "TABLE") {
left += el.clientLeft;
}
top += o.offsetTop;
if (el.clientTop && el.nodeName != "TABLE") {
top += el.clientTop;
}
o = el;
if (o.offsetParent == null) {
if (o.offsetLeft) {
left += o.offsetLeft;
}
if (o.offsetTop) {
top += o.offsetTop;
}
}
offsetParent = o.offsetParent;
}
}
return {
left: left,
top: top
};
};
Uso:
var p = $("#wrapper2").getPos();
alert("top:"+p.top+"; left:"+p.left);
La función offset lo hará por usted.
Aquí está el ejemplo que dan:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );