cómo encontrar las coordenadas de un botón o imagen HTML, ¿cruzar el navegador?

Question

Hubo un hilo sobre esto en comp.lang.javascript recientemente donde se anunció victoria, pero no fue publicada código:

en una página HTML ¿cómo encontrar las coordenadas de la esquina inferior izquierda de la imagen (un elemento o botón , por ejemplo) de manera confiable en todos los navegadores y estilos de página? El método defendido en "Ajax en acción" (copia que tengo) no parece funcionar en IE bajo algunas circunstancias. Para facilitar el problema, supongamos que podemos establecer que el estilo del documento global sea "tradicional" o "transitorio" o lo que sea.

Proporcione un código o un puntero al código por favor (una función completa que funciona en todos los navegadores) - no solo diga "eso es fácil" y bromee sobre lo que atraviesa el DOM - si quiero leer ese tipo de todo, volveré a comp.lang.javascript. Por favor, repórtenme si esto es una repetición y apúntenme a la solución - Intenté encontrarlo.

Answer 1

En mi experiencia, la única manera segura de conseguir cosas como esta para el trabajo está utilizando JQuery (no tenga miedo , es solo un archivo de script externo que debe incluir). A continuación, puede utilizar una declaración como

$('#element').position() 

o

$('#element').offset() 

para obtener las coordenadas actuales, que funciona de manera excelente a través de cualquier y todos los navegadores que he encontrado hasta ahora.

Answer 2

Prueba esto:

var elm = document.getElementById('foo'); 
var point = {x:0,y:elm.offsetHeight}; // Change to y:0 to get the top-left 

while (elm) 
{ 
    // This will get you the position relative to the absolute container, 
    // which is what you need for positioning an element within it 
    if (elm.style.position == 'absolute') 
     break; 

    point.x += elm.offsetLeft; 
    point.y += elm.offsetTop; 

    elm = elm.offsetParent; 
} 

Answer 3

En jQuery:

var jq = $('#yourElement'); 
var position = jq.offset(); 
alert('x: ' + position.left + ', y: ' + position.top); 

var bottomLeftPixelPosition = 
    { left: position.left, top: position.top + jq.height() - 1; }; 

Answer 4

He estado usando esto, funciona tanto para IE como para Firefox.

 
var Target = document.getElementById('SomeID'); 
var Pos = findPos(Target); 

AnotherObj = document.getElementById('AnotherID'); 
AnotherObj .style.top = Pos[1] + "px"; 
AnotherObj .style.left = Pos[0] + "px"; 

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

Answer 5

Encontré esta solución de la web ... Esto solucionó totalmente mi problema. Por favor, consulte este enlace para el origen. http://www.quirksmode.org/js/findpos.html

/** This script finds the real position, 
* so if you resize the page and run the script again, 
* it points to the correct new position of the element. 
*/ 
function findPos(obj){ 
    var curleft = 0; 
    var curtop = 0; 

    if (obj.offsetParent) { 
     do { 
     curleft += obj.offsetLeft; 
     curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     return {X:curleft,Y:curtop}; 
    } 
} 

funciona perfectamente en Firefox, Internet Explorer 8, Opera (Esperanza en otros también) Gracias a los que comparten sus conocimientos ... Saludos,

adinámicas