Obtenir la position de l'élément par javascript

J'ai vu une douzaine de script qui peut attraper la position x et y d'un élément/objet dans la page. Mais je suis toujours avoir des problèmes avec la capture de x et y lorsque la page web est à l'aide de marges à l'organisme, ou d'autres éléments, absolu/relatif des éléments, tels que.

Est-il une solution qui donne la position exacte, peu importe ce que les marges ou les rembourrages sont utilisés.

🙂

source d'informationauteur Johnny

  1. 12

    Je utiliser le code suivant pour déplacer div boîte de suivre le curseur dans ce Web IME site

    function xy(x) {
    o = document.getElementById(x);
    var l =o.offsetLeft; var t = o.offsetTop;
    while (o=o.offsetParent)
        l += o.offsetLeft;
    o = document.getElementById(x);
    while (o=o.offsetParent)
        t += o.offsetTop;
    return [l,t];
}

    Sa retourner un tableau [à gauche,en haut],

  2. 10

    Obtenir la position exacte est simplement une question de l'ajout de la offsetLefts et offsetTops de manière récursive pour le offsetParents:

    function getPos(ele){
    var x=0;
    var y=0;
    while(true){
        x += ele.offsetLeft;
        y += ele.offsetTop;
        if(ele.offsetParent === null){
            break;
        }
        ele = ele.offsetParent;
    }
    return [x, y];
}

    Btw, cette solution serait probablement courir deux fois plus vite que l'autre solution ci-dessuscar nous n'en boucle une fois.

  3. 1

    offsetParent et d'autres décalage fonctions sont vieux... utiliser le getBoundingClientRect
    fonction... d'utiliser ce:

    function getAbsPosition(element) {
   var rect = element.getBoundingClientRect();
   return {x:rect.left,y:rect.top}
}

    maintenant, vous pouvez l'utiliser comme ceci

    <div style="margin:50px;padding:50px;" id="myEl">lol</div>
<script type="text/javascript">
    var coords = getAbsPosition( document.getElementById('myEl') );
    alert( coords.x );alert( coords.y );
</script>

    Ne vous inquiétez pas... n'importe comment beaucoup de marge ou de la position ou du remplissage de l'élément a, il fonctionne toujours

  4. 0

    VOUS code est carrément mauvais, et j'ai quelques améliorations sur Pacerier de donner, donc je vais poster ma propre réponse:

    function getPos(el, rel)
{
    var x=0, y=0;
    do {
        x += el.offsetLeft;
        y += el.offsetTop;
        el = el.offsetParent;
    }
    while (el != rel)
    return {x:x, y:y};
}

    S'il est juste utilisé comme getPos(myElem) sera de retour de la position globale. Si un deuxième élément est inclus comme un argument (c'est à dire getPos(myElem, someAncestor)) qui est l'ancêtre des parents/de la première (au moins quelque part jusqu'à la chaîne), alors il sera de donner la position par rapport à cet ancêtre. Si rel n'est pas donné (c'est à dire à gauche undefined), puis il utilise à dessein != au lieu de !== parce qu'il devrait s'arrêter quand el arrive à null et rel est undefined ainsi, de sorte que la non-égalité stricte qui est intentionnel, ne pas le modifier. Il renvoie également à un objet, car c'est un peu plus lisible dans l'utilisation d'un tableau (et donc vous pouvez faire quelque chose comme getPos().x).

    C'est dérivée à partir de Pacerier de la solution, donc si vous êtes va upvote ce problème, pensez à upvoting son trop.