Position/Offset des Elements relativ zu einem übergeordneten Container abrufen?

Wie kann ich den Offset eines Containers relativ zu einem Elternteil mit reinem JS abrufen?

element.offsetLeft und element.offsetTop geben die Position eines Elements in Bezug auf seine an offsetParent (das ist das nächste übergeordnete Element mit einer Position von relative oder absolute.)

in reinem js einfach verwenden offsetLeft und offsetTop Eigenschaften.
Beispiel Geige: 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>

Ich habe eine andere Lösung. Subtrahieren Sie den Wert der übergeordneten Eigenschaft vom Wert der untergeordneten Eigenschaft

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

Ich habe es so im Internet Explorer gemacht.

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;
};

=================== so kann man es nennen

getWindowRelativeOffset(top, inputElement);

Ich konzentriere mich nur gemäß meinem Fokus auf IE, aber ähnliche Dinge können für andere Browser getan werden.

Beispiel

Wenn wir also ein untergeordnetes Element mit der ID „child-element“ hätten und wir seine linke/obere Position relativ zu einem übergeordneten Element erhalten wollten, sagen wir ein div mit der Klasse „item-parent“, würden wir das tun Verwenden Sie diesen Code.

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

Plugin Schließlich zum eigentlichen Plugin (mit ein paar Anmerkungen, die erklären, was vor sich geht):

// 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));

Notiz : Sie können verwenden Dies on mouseClick oder mouseover Event

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

Fügen Sie den Offset des Ereignisses zum Offset des übergeordneten Elements hinzu, um die absolute Offset-Position des Ereignisses zu erhalten.

Ein Beispiel :

HTMLElement.addEventListener('mousedown',function(e){

    var offsetX = e.offsetX;
    var offsetY = e.offsetY;

    if( e.target != this ){ // 'this' is our HTMLElement

        offsetX = e.target.offsetLeft + e.offsetX;
        offsetY = e.target.offsetTop + e.offsetY;

    }
}

Wenn das Ereignisziel nicht das Element ist, in dem das Ereignis registriert wurde, wird der Versatz des übergeordneten Elements zum aktuellen Ereignisversatz addiert, um den „absoluten“ Versatzwert zu berechnen.

Laut Mozilla Web API: „The HTMLElement.offsetLeft Die schreibgeschützte Eigenschaft gibt die Anzahl der Pixel zurück, die die obere linke Ecke des aktuellen Elements beträgt Versatz nach links innerhalb des HTMLElement.offsetParent-Knotens.“

Dies geschieht meistens, wenn Sie ein Ereignis auf einem übergeordneten Element registriert haben, das mehrere weitere untergeordnete Elemente enthält, z. B.: eine Schaltfläche mit einem inneren Symbol oder einer Textspanne, an li Element mit inneren Spannweiten. etc…

Sicher ist es einfach mit reinem JS, tun Sie dies einfach, arbeiten Sie auch für feste und animierte HTML 5-Panels, ich habe diesen Code erstellt und ausprobiert und er funktioniert für jeden Browser (einschließlich IE 8):

<script type="text/javascript">
    function fGetCSSProperty(s, e) {
        try { return s.currentStyle ? s.currentStyle[e] : window.getComputedStyle(s)[e]; }
        catch (x) { return null; } 
    }
    function fGetOffSetParent(s) {
        var a = s.offsetParent || document.body;

        while (a && a.tagName && a != document.body && fGetCSSProperty(a, 'position') == 'static')
            a = a.offsetParent;
        return a;
    }
    function GetPosition(s) {
        var b = fGetOffSetParent(s);

        return { Left: (b.offsetLeft + s.offsetLeft), Top: (b.offsetTop + s.offsetTop) };
    }    
</script>