Saber posición absoluta de un elemento

[_cronos2]

Bueno de nuevo por aquí, estoy tratando de hacer una función que mueva un elemento y para eso necesito conocer dónde está ahora exactamente para sumarle o restarle lo que necesite. De momento tengo la función así:

Código Javascript:

// ...
  mover : function(cuanto, desde){
   var estilo = P(this).getStyle(desde).convertirMedidas(cuanto.match(/[a-z]+$/i)[0]);
   P(this).style[desde] = parseFloat(cuanto.match(/^\d+/)[0] + cuanto) + estilo.match(/[a-z]+$/i)[0];
   return P(this);
  },
// ...
// Ej : P('#s').mover('10px', 'top');
 

En teoría todo bien, la función convertirMedidas como el propio nombre indica la uso para pasar de cm a px, pt...; y no hay problema con ella. La p*&#"€ es que getStyle en vez de devolverme por ejemplo 20px, me devuelve auto . Ahora la pregunta es, ¿cómo puedo saber cuánto hay desde por ejemplo un div hasta el margen izquierdo.
Saludos y gracias ^^

[omarMusic]

Tu JS muy raramente complejo, espero programar así algún día, pero por si acaso ya usaste

document.getElementById(id).offsetLeft
document.getElementById(id).offsetTop

o los métodos de jquery offset() y position()??

Saludos!

[_cronos2]

Correcto! Mañana lo pruebo y ya veré cómo me va. En realidad el código no es complejo, pero como uso funciones que he fabricado yo puede parecer que es más complicado. Como ya dije, convertirMedidas es para usar distintas unidades de medidad, y getStyle es una función que devuelve el computedStyle (en IE, en FF y Chrome devuelve otra cosa más larga pero es lo mismo XD). Por último la función P no es más que document.querySelector.
Saludos (:

[IsaBelM]

no olvides de acompañar a esas dos propiedades con la propiedad offsetParent

[masterpuppet]

No es tan simple, si googleas vas a encontrar info, te dejo un resumen de la implementacion de Mootools para que te hagas una idea.

Código Javascript:

function isBody(element){
    return (/^(?:body|html)$/i).test(element.tagName);
};
 
function getOffset(element){
    //...
    var position = {x: 0, y: 0}
    while (element && !isBody(element)){ 
        position.x += element.offsetLeft;
        position.y += element.offsetTop;
        element = element.offsetParent;
    //...
    }
    //...
    return position;
}
 

Saludos.

[_cronos2]

Bueno tengo dos opciones, pero no sé cuál es la correcta, porque a veces devuelven lo mismo y a veces diferente:

Código Javascript:

posicion : function(donde){
   var left = this.offsetLeft, top = this.offsetTop, padre = this.offsetParent, body = P(document.body);
   while(!/(body|html)/i.test(padre.tagName)){
    left += padre.offsetLeft;
    top += padre.offsetTop;
    padre = padre.offsetParent;
   }
   return {
    'left' : left,
    'right' : body.getStyle('width').match(/\d+/)[0]-left,
    'top' : top,
    'bottom' : body.getStyle('height').match(/\d+/)[0]-top
   }[donde];
  },
 

y

Código Javascript:

posicion : function(donde){
   var left = this.offsetLeft, top = this.offsetTop, padre = this.parentNode, body = P(document.body);
   while(!/(body|html)/i.test(padre.tagName)){
    left += padre.offsetLeft;
    top += padre.offsetTop;
    padre = padre.parentNode;
   }
   return {
    'left' : left,
    'right' : body.getStyle('width').match(/\d+/)[0]-left,
    'top' : top,
    'bottom' : body.getStyle('height').match(/\d+/)[0]-top
   }[donde];
  },
 

En principio la que me funciona 'mejor' es la primera, con offsetParent (con el add-on Web Developer de FF averiguo el left y lo comparo con el resultado), pero me gustaría saber por qué no se puede usar parentNode.
Saludos :D