Obter a posição Top e Left do elemento

Obter a posição Top e Left de elementos em relação ao container pai com JavaScript puro

 

element.offsetLeft e element.offsetTop da a posição de um elemento em relação ao seu offsetParent (que é o elemento pai mais próximo com uma posição de relativa ou absoluta).

 

function offsetPosition(pos) {
    var selection = window.getSelection();
    if( selection.rangeCount > 0 ) {
        var range = selection.getRangeAt(0);
        var container = range.commonAncestorContainer;
        /** se precisar pagar só um elemento não precisa do loop, 
         * só adicione parentNode antes dos offset */
        while(container && container.nodeType !== 1) {
            container = container.parentNode;
        }
        if(container && container.closest('#parent_element')) {
            if( container.tagName == 'H3' || container.tagName == 'ADDRESS' ) {
                if( pos == 'top' )
                    return container.offsetTop;
                else
                    return container.offsetLeft;
            }
        }
        
    }
}

 

O conteiner pai tem  ter um posicionamento diferente de static

<div id="parent_element" style="position: relative;">
    <p>Hymenaeos vero veniam orci rhoncus, quibusdam egestas, sapien montes.</p>
    <h3>dictumst integer perferendis</h3>
    <p>Integer metus urna saepe fugiat wisi habitasse sit. Totam neque suspendisse ac <a href="https://webship.com.br">interdum montes nesciunt</a></p>
    <h3>Lobortis dapibus deserunt! Voluptas cubilia.</h3>
    <p>natoque excepteur, repudiandae, cursus vulputate, unde nulla urna.</p>
    <address>Adipiscing, magna, vero necessitatibus laboriosam</address>
</div>

 

Execulte a função

document.querySelector("#parent_element").addEventListener('mouseup', () => {
    console.log('Top: ', offsetPosition('top'));
    console.log('Left: ', offsetPosition('left'));
});

 

Copie e cole o codigo e veja ele funcionando, ai é claro faça as alterações necessárias para o seu projeto. Qualquer dúvida deixe nos comentários.

Categorias: JavaScript

Deixe seu comentário

Conecte-se a uma conta do google para comentar.

Nenhum comentário

    Seja o primeiro a comentar