javascript - posicionar - posicion de un elemento html

Obtener posición/desplazamiento del elemento relativo a un contenedor principal?

Question

Estoy acostumbrado a trabajar con jQuery. En mi proyecto actual, sin embargo, uso zepto.js. Zepto no proporciona un método de position() como lo hace jQuery. Zepto solo viene con offset() .

¿Alguna idea de cómo puedo recuperar el desplazamiento de un contenedor en relación con un padre con js puro o con Zepto?

Answer 1

Agregue el desplazamiento del evento al desplazamiento del elemento principal para obtener la posición de desplazamiento absoluto del evento.

Un ejemplo :

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;

    }
}

Cuando el objetivo del evento no es el elemento en el que se registró el evento, agrega el desplazamiento del elemento principal al desplazamiento del evento actual para calcular el valor de desplazamiento "Absoluto".

De acuerdo con la API web de Mozilla: "La propiedad de solo lectura HTMLElement.offsetLeft devuelve el número de píxeles que la esquina superior izquierda del elemento actual se desplaza hacia la izquierda dentro del nodo HTMLElement.offsetParent " .

Esto ocurre principalmente cuando registra un evento en un padre que contiene muchos más hijos, por ejemplo: un botón con un icono interno o un lapso de texto, un elemento li con tramos interiores. etc ...

Answer 2

Claro, es fácil con JS puro, solo haz esto, trabaja para paneles de HTML 5 fijos y animados también, hice e intenté este código y funciona para cualquier brower (incluye 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 3

Lo hice así en 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;
};

=================== puedes llamarlo así

getWindowRelativeOffset(top, inputElement);

Me concentro en IE solo según mi enfoque, pero se pueden hacer cosas similares para otros navegadores.

Answer 4

Tengo otra solución. Resta el valor de la propiedad principal del valor de la propiedad hija

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

Answer 5

en js puros simplemente use las propiedades offsetLeft y offsetTop .
Ejemplo de violín: 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 6

element.offsetLeft y element.offsetTop son las propiedades de javascript puro para encontrar la posición de un elemento con respecto a su offsetParent ; siendo el elemento parental más cercano con una posición de relative o absolute

Alternativamente, siempre puede usar Zepto para obtener la posición de un elemento Y su elemento primario, y simplemente restar los dos:

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

Esto tiene el beneficio de darle la compensación de un hijo en relación con su padre incluso si el padre no está posicionado.

Answer 7

Ejemplo

Entonces, si tuviéramos un elemento hijo con un id de "elemento hijo" y quisiéramos obtener su posición superior / izquierda relativa a un elemento padre, digamos un div que tuviera una clase de "elemento-padre", tendríamos usa este código

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

Complemento Finalmente, para el complemento actual (con algunas notas que expanden lo que está sucediendo):

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

Nota: Puede usar esto en el evento MouseClick o mouseover

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