Obtenir la position/le décalage d'un élément par rapport à un conteneur parent ?

Question

Comment puis-je récupérer le décalage d'un conteneur par rapport à un parent en JS pur ?

Answer 1

element.offsetLeft y element.offsetTop donnent la position d'un élément par rapport à son offsetParent (qui est l'élément parent le plus proche avec une position de relative o absolute .)

Answer 2

En js pur, il suffit d'utiliser offsetLeft y offsetTop propriétés.
Exemple de violon : http://jsfiddle.net/WKZ8P/

var elm = document.querySelector('span');
console.log(elm.offsetLeft, elm.offsetTop);

p   { position:relative; left:10px; top:85px; border:1px solid blue; }
span{ position:relative; left:30px; top:35px; border:1px solid red; }

<p>
    <span>paragraph</span>
</p>

Answer 3

Je l'ai fait comme ceci dans Internet Explorer.

function getWindowRelativeOffset(parentWindow, elem) {
    var offset = {
        left : 0,
        top : 0
    };

    // relative to the target field's document
    offset.left = elem.getBoundingClientRect().left;
    offset.top = elem.getBoundingClientRect().top;

    // now we will calculate according to the current document, this current
    // document might be same as the document of target field or it may be
    // parent of the document of the target field
    var childWindow = elem.document.frames.window;
    while (childWindow != parentWindow) {
        offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
        offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
        childWindow = childWindow.parent;
    }

    return offset;
};

\=================== vous pouvez l'appeler comme ceci

getWindowRelativeOffset(top, inputElement);

Je me concentre uniquement sur IE, mais des choses similaires peuvent être faites pour d'autres navigateurs.

Answer 4

J'ai une autre solution. Soustraire la valeur de la propriété parent de la valeur de la propriété enfant

$('child-div').offset().top - $('parent-div').offset().top;

Answer 5

Exemple

Ainsi, si nous avions un élément enfant avec un id de "child-element" et que nous voulions obtenir sa position gauche/haut par rapport à un élément parent, disons un div qui a une classe de "item-parent", nous utiliserions ce code.

var position = $("#child-element").offsetRelative("div.item-parent");
alert('left: '+position.left+', top: '+position.top);

Plugin Enfin, pour le plugin proprement dit (avec quelques notes expliquant ce qui se passe) :

// offsetRelative (or, if you prefer, positionRelative)
(function($){
    $.fn.offsetRelative = function(top){
        var $this = $(this);
        var $parent = $this.offsetParent();
        var offset = $this.position();
        if(!top) return offset; // Didn't pass a 'top' element 
        else if($parent.get(0).tagName == "BODY") return offset; // Reached top of document
        else if($(top,$parent).length) return offset; // Parent element contains the 'top' element we want the offset to be relative to 
        else if($parent[0] == $(top)[0]) return offset; // Reached the 'top' element we want the offset to be relative to 
        else { // Get parent's relative offset
            var parent_offset = $parent.offsetRelative(top);
            offset.top += parent_offset.top;
            offset.left += parent_offset.left;
            return offset;
        }
    };

    $.fn.positionRelative = function(top){
        return $(this).offsetRelative(top);
    };
}(jQuery));

Note : Vous pouvez utiliser ce sur l'événement mouseClick ou mouseover

$(this).offsetRelative("div.item-parent");