Pular para o conteúdo principal

Obter a posição Top e Left do elemento

Obter a posição Top e Left do elemento - Publicado por: Wellington Pragidi Desenvolvedor Web

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

Hymenaeos vero veniam orci rhoncus, quibusdam egestas, sapien montes.

dictumst integer perferendis

Integer metus urna saepe fugiat wisi habitasse sit. Totam neque suspendisse ac interdum montes nesciunt

Lobortis dapibus deserunt! Voluptas cubilia.

natoque excepteur, repudiandae, cursus vulputate, unde nulla urna.

Adipiscing, magna, vero necessitatibus laboriosam

 

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.

Categoria: JavaScript