it-swarm.com.de

jQuery x y Dokumentkoordinaten des DOM-Objekts

Ich muss die X, Y-Koordinaten (relativ zum oberen/linken Rand des Dokuments) für ein DOM-Element ermitteln. Ich kann keine Plugins oder jQuery-Eigenschaft oder -Methode finden, die mir diese geben können. Ich kann den oberen und linken Rand des DOM-Elements abrufen, dies kann jedoch entweder relativ zum aktuellen Container/übergeordneten Element oder zum Dokument erfolgen.

49
DMCS

sie können das Dimensions Plugin verwenden [Veraltet ... in jQuery 1.3.2+ enthalten]

offset ()
Ermittelt den aktuellen Versatz des ersten übereinstimmenden Elements in Pixel relativ zum Dokument .

position ()
Ruft die obere und linke Position eines Elements relativ zu seinem versetzten übergeordneten Element ab.

wenn du das weißt, ist es einfach ... (benutze mein kleines svg Projekt als Beispielseite )

var x = $("#wrapper2").offset().left;
var y = $("#wrapper2").offset().top;

console.log('x: ' + x + ' y: ' + y);

ausgabe:

x: 53 y: 177

hoffe es hilft was du suchst.

hier ist ein bild von offset () und position ()

mit XRay

alt text

mit Web Developer Symbolleiste

alt text

92
balexandre

Meine Lösung ist ein Plugin mit "Workarounds": + D. Aber funktioniert!

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
        };
    };

Verwendung:

var p = $("#wrapper2").getPos();
alert("top:"+p.top+"; left:"+p.left);
7
EderBaum

Die Offset Funktion erledigt das für Sie.

Hier ist das Beispiel, das sie geben:

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
4
Jeff Davis