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




jquery set element position relative to parent (6)

Ich bin es gewohnt mit jQuery zu arbeiten. In meinem aktuellen Projekt verwende ich jedoch zepto.js. Zepto bietet keine position() -Methode wie jQuery. Zepto kommt nur mit offset() .

Irgendeine Idee, wie ich den Offset eines Containers relativ zu einem Elternteil mit reinem js oder mit Zepto abrufen kann?


Fügen Sie den Offset des Ereignisses zum übergeordneten Element-Offset 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, für das das Ereignis registriert wurde, addiert es den Offset des übergeordneten Objekts zum aktuellen Ereignisoffset, um den Offsetwert "Absolute" zu berechnen.

Laut Mozilla Web API: "Die schreibgeschützte Eigenschaft HTMLElement.offsetLeft gibt die Anzahl der Pixel zurück, die die obere linke Ecke des aktuellen Elements innerhalb des HTMLElement.offsetParent-Knotens nach links versetzt. "

Dies geschieht hauptsächlich, wenn Sie ein Ereignis auf einem übergeordneten Objekt registriert haben, das mehrere weitere li Elemente enthält, z. B. eine Schaltfläche mit einem inneren Symbol oder einer li , ein li Element mit inneren Bereichen. etc...


Beispiel

Wenn wir also ein untergeordnetes Element mit der ID "child-element" hätten und wir die linke / obere Position relativ zu einem übergeordneten Element erhalten möchten, sagen wir ein div, das eine Klasse von "item-parent" hat benutze diesen Code.

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

Plugin Abschließend für das eigentliche Plugin (mit ein paar Anmerkungen zum Explaining):

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

Hinweis: Sie können dies auf mouseClick oder mouseover Event verwenden

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

in reinen js nur offsetLeft und offsetTop Eigenschaften.
Beispielgeige: 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;

element.offsetLeft und element.offsetTop sind die reinen JavaScript-Eigenschaften zum Auffinden der Position eines Elements in Bezug auf offsetParent ; das nächste Elternelement mit einer relative oder absolute Position ist

Alternativ können Sie immer Zepto , um die Position eines Elements UND dessen Eltern zu erhalten, und ziehen Sie einfach die beiden ab:

var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}

Dies hat den Vorteil, dass Sie den Offset eines untergeordneten Elements relativ zum übergeordneten Element angeben, auch wenn das übergeordnete Element nicht positioniert ist.


Sicher ist einfach mit reinem JS, tun Sie das einfach, arbeiten Sie für feste und animierte HTML 5-Panels auch, ich habe diesen Code probiert und probiert und er funktioniert für jeden Browser (inkl. 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>




zepto