Suchen X/Y eines HTML-Elements mit JavaScript

Question

Wie kann ich die XY-Koordinaten eines HTML-Elements (DIV) von JavaScript finden, wenn sie nicht explizit festgelegt wurden?

Answer 1

Das kann je nach Browser und Version schwierig sein. Ich würde vorschlagen, jQuery und das Positionsplugin zu verwenden.

Answer 2

Ich bin nicht sicher, wofür Sie es brauchen, und solche Dinge sind immer relativ (Bildschirm, Fenster, Dokument). Aber wenn ich brauchte, um das herauszufinden, fand ich diese Seite hilfreich: http://www.mattkruse.com/javascript/anchorposition/source.html

Und ich fand auch, dass die Tooltip Plugin jemand gemacht für jQuery hatte alle möglichen interessanten Einblick in x, y Positionierung Tricks (an seinem Ansichtsfenster schauen Klasse und die zugrunde liegende Unterstützung jQuery bietet dafür). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

Sie können eine Bibliothek wie Prototype oder jQuery verwenden, oder Sie können this handy function verwenden:

Es gibt ein Array.

myPos = findPos(document.getElementById('something')) 
x = myPos[0] 
y = myPos[1] 

function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
    curleft = obj.offsetLeft 
    curtop = obj.offsetTop 
    while (obj = obj.offsetParent) { 
     curleft += obj.offsetLeft 
     curtop += obj.offsetTop 
    } 
    } 
    return [curleft,curtop]; 
} 

Answer 4

Hier ist, wie ich es tun:

// Based on: http://www.quirksmode.org/js/findpos.html 
var getCumulativeOffset = function (obj) { 
    var left, top; 
    left = top = 0; 
    if (obj.offsetParent) { 
     do { 
      left += obj.offsetLeft; 
      top += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return { 
     x : left, 
     y : top 
    }; 
}; 

Answer 5

Für was es wert ist, ist hier eine rekursive Version:

function findPos(element) { 
    if (element) { 
    var parentPos = findPos(element.offsetParent); 
    return [ 
     parentPos.X + element.offsetLeft, 
     parentPos.Y + element.offsetTop 
    ]; 
    } else { 
    return [0,0]; 
    } 
} 

Answer 6

Sie zwei Objekte, die die Element.prototype hinzufügen können, um oben/links zu bekommen von irgendeinem Element.

window.Object.defineProperty(Element.prototype, 'documentOffsetTop', { 
    get: function() { return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop : 0); } 
}); 

window.Object.defineProperty(Element.prototype, 'documentOffsetLeft', { 
    get: function() { return this.offsetLeft + (this.offsetParent ? this.offsetParent.documentOffsetLeft : 0); } 
}); 

Hier ist eine Demo, die Ergebnisse zu jQuery Vergleich offset().top und .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/