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

Question

Je dois obtenir les coordonnées X, Y (par rapport au haut/à gauche du document) pour un élément DOM. Je ne peux pas localiser les plugins ou la propriété ou la méthode jQuery qui peuvent me les donner. Je peux obtenir le haut et le gauche de l'élément DOM, mais cela peut être soit relatif à son conteneur/parent actuel, soit au document.

Answer 1

vous pouvez utiliser Dimensions plug-in [... Obsolète inclus dans jQuery 1.3.2+]

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

position de ()
obtient la position en haut et à gauche d'un élément par rapport à son parent décalage.

sachant cela, il est facile ... (en utilisant ma petite svg project comme example page)

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

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

sortie:

x: 53 y: 177 

espère que cela aide ce que vous cherchez.

est ici une image de décalage() et la position()

utilisant XRay

en utilisant la barre d'outils Web Developer

Answer 2

Le offset la fonction 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); 

Answer 3

Ma solution est un plug-in avec "solutions de contournement": + 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 
     }; 
    }; 

Utilisation:

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