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

Question

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().

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

Answer 1

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

Alternativ zu sein, können Sie immer Zepto verwenden, um die Position eines Elements und seine Eltern zu bekommen, und subtrahieren Sie einfach die beiden:

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

Dies hat die Vorteil, Ihnen den Offset eines Kindes relativ zu seinem Elternteil zu geben, selbst wenn das Elternteil nicht positioniert ist.

Answer 2

in reinem js nur offsetLeft und offsetTop Eigenschaften verwenden.
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>

Answer 3

Ich habe es so in 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; 
}; 

=================== Sie es wie diese nur als pro mein Fokus

getWindowRelativeOffset(top, inputElement); 

ich auf IE konzentrieren nennen kann, aber Ähnliche Dinge können für andere Browser getan werden.

Answer 4

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, das das Ereignis registriert wurde, ist es die die Mutter des aktuellen Ereignis, um Offset Offset addiert die „Absolut“ Offset zu berechnen Wert.

Nach Mozilla Web API: „The HTMLElement.offsetLeft schreibgeschützte Eigenschaft gibt die Anzahl der Pixel, die die obere linke Ecke des aktuellen Elements nach links innerhalb des Knotens HTMLElement.offsetParent Offset.“

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

Answer 5

Sicher ist einfach mit reinem JS, nur das tun, die Arbeit für feste und animieren HTML 5 Platten zu, ich gemacht und diesen Code versuchen, und es funktioniert für jede Brower (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> 

Answer 6

Wenn wir also ein Child-Element mit der ID "child-element" haben und wir wollen, dass es links/oben relativ zu einem Elternelement ist, sagen wir ein div mit einer Klasse von "item" "parent", wir würden diesen Code verwenden.

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

Plugin schließlich für die eigentliche Plugin (mit ein paar Notizen expalaining, was los ist):

// 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 diese auf mouseklicken Verwendung oder Mouseover Ereignis

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

Answer 7

Ich habe eine andere Lösung. Subtrahieren der Eigenschaft der übergeordneten Eigenschaft von der Eigenschaft der untergeordneten Eigenschaft

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