web-dev-qa-db-fra.com

jQuery x y coordonnées du document de l'objet DOM

J'ai besoin d'obtenir les coordonnées X, Y (par rapport au haut/à gauche du document) pour un élément DOM. Je ne trouve aucun plugin ou propriété ou méthode jQuery qui puisse me les fournir. Je peux obtenir le haut et la gauche de l'élément DOM, mais cela peut être relatif à son conteneur/parent actuel ou au document.

javascriptjqueryuser-interfacelocation
49
DMCS

vous pouvez utiliser Dimensions plugin [Obsolète ... inclus dans jQuery 1.3.2+]

offset ()
Obtenez le décalage actuel du premier élément correspondant, en pixels, par rapport au document .

position ()
Obtient la position supérieure et gauche d'un élément par rapport à son parent de décalage .

sachant cela, alors c'est facile ... (en utilisant mon petit projet svg comme page d'exemple )

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

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

sortie:

x: 53 y: 177

j'espère que cela aide ce que vous recherchez.

voici une image de offset () et position ()

en utilisant XRay

alt text

en utilisant Web Developer barre d'outils

alt text

92
balexandre

Ma solution est un plugin avec des "contournements": + D. Mais ça marche!

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

Usage:

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

La fonction offset fera cela pour vous.

Voici l'exemple qu'ils donnent:

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