comment trouver les coordonnées d'un bouton HTML ou d'une image, navigateur croisé?

Question

Il y avait un fil à ce sujet dans comp.lang.javascript récemment où victoire a été annoncée, mais aucun code n'a été affiché:

Sur une page HTML comment trouvez-vous les coordonnées de coin inférieur gauche d'un élément (l'image ou le bouton , disons) de manière fiable à travers les navigateurs et les styles de page? La méthode préconisée dans "Ajax in Action" (copie que j'ai) ne semble pas fonctionner dans IE dans certaines circonstances. Pour simplifier le problème, supposons que nous pouvons définir le style de document global comme étant «traditionnel» ou «transitoire» ou autre. S'il vous plaît fournir un code ou un pointeur au code s'il vous plaît (une fonction complète qui fonctionne sur tous les navigateurs) - ne dites pas simplement "c'est facile" et blather sur ce qui traverse le DOM - si je veux lire ce genre de chose je vais revenir à comp.lang.javascript. S'il vous plaît, grondez-moi si c'est une répétition et montrez-moi la solution - j'ai essayé de le trouver.

Answer 1

Dans mon expérience, la seule façon infaillible pour obtenir des trucs comme ça au travail est l'utilisation JQuery (ne pas avoir peur , c'est juste un fichier de script externe que vous devez inclure). Ensuite, vous pouvez utiliser une instruction comme

$('#element').position() 

ou

$('#element').offset() 

pour obtenir les coordonnées actuelles, qui fonctionne très bien sur tout et tous les navigateurs que j'ai rencontrés jusqu'à présent.

Answer 2

Essayez ceci:

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

Je l'ai utilisé, fonctionne à la fois pour IE et 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

J'ai trouvé cette solution sur le web ... Ce problème a été entièrement résolu. Veuillez vérifier ce lien pour l'origine. 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}; 
    } 
} 

fonctionne parfaitement dans Firefox, IE8, Opera (Hope dans d'autres aussi) Merci à tous ceux qui partagent leurs connaissances ... Cordialement,

adynamiques