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 precisa ter um posicionamento diferente de static

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.