web-gelistirme-sc.com

Üst konteynere göre elementin pozisyonunu / ofsetini alınız mı?

JQuery ile çalışmaya alışkınım. Mevcut projemde zepto.js kullanıyorum. Zepto, jQuery gibi bir position() yöntemi sağlamaz. Zepto sadece offset() ile birlikte gelir.

Saf js veya Zepto ile bir ebeveyne göre bir konteynerin ofsetini nasıl alabilirim?

104
matt

Uyarı: jQuery, standart JavaScript değil

element.offsetLeft ve element.offsetTop, bir elemanın offsetParent değerine göre konumunu bulmak için saf javascript özellikleridir; relative veya absolute konumuna sahip en yakın ana öğe olma

Alternatif olarak, bir öğenin VE üst öğesinin konumunu elde etmek için her zaman Zepto kullanabilirsiniz ve sadece ikisini çıkartabilirsiniz:

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

Bu, ebeveyn pozisyonda olmasa bile, size çocuğun ebeveyni ile ilgili dengesini verme avantajına sahiptir.

182
jackwanders

saf js'de sadece offsetLeft ve offsetTop özelliklerini kullanın.
Örnek keman: 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>
48
fcalderan

Internet Explorer'da böyle yaptım.

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

==================== Böyle böyle çağırabilirsiniz

getWindowRelativeOffset(top, inputElement);

Odak noktama göre IE 'ye odaklanıyorum, ancak diğer tarayıcılar için de benzer şeyler yapılabilir.

5
Imran Ansari

Olayın mutlak uzaklık konumunu elde etmek için olayın ögesini üst öğe ögesine ekleyin.

Bir örnek :

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;

    }
}

Etkinlik hedefi, etkinliğin kayıtlı olduğu öğe olmadığında, "Mutlak" öteleme değerini hesaplamak için üst öğenin öbeğini geçerli etkinlik ötelemesine ekler.

Mozilla Web API'sine göre: " HTMLElement.offsetLeft salt okunur özelliği, geçerli öğenin sol üst köşesinin olduğu piksel sayısını döndürür HTMLElement.offsetParent düğümü içinde sola sapma. "

Bu daha çok, birkaç tane daha çocuk içeren bir ebeveyn üzerine bir etkinlik kaydettiğinizde gerçekleşir, örneğin: bir iç simgeye veya metin alanına sahip bir düğme, iç boşluklara sahip bir li öğesi. vb...

1
levi

Başka bir Çözüm buldum. Üst özellik değerini alt özellik değerinden çıkarma

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

Örnek

Yani, eğer "child-element" kimliğine sahip bir alt elemente sahip olsaydık ve bir üst elemente göre sol/üst pozisyonunu elde etmek istiyorsak, "item-parent" sınıfına sahip bir div deriz. bu kodu kullan.

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

Plugin Sonunda, gerçek eklenti için (neler olduğunu açıklayan birkaç notla):

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

Not: Kullanabilirsiniz this mouseClick veya mouseover Olayında

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

Elbette saf JS ile kolaydır, sadece bunu yapın, sabit ve hareketli HTML 5 panelleri için de çalışın, bu kodu yaptım ve denedim ve herhangi bir tarayıcı için çalışıyor (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>
0
Moises Conejo