How does js get the position of an element on the screen?

is the distance of the element relative to the left and top edges of the screen,

whether or not this element is detached from the document stream or the page is scrolling,

how can I get it correctly?

there is something wrong with the offsetTop and offsetLeft I use now. It will not work if the page is scrolled

Typescript node.js javascript
Jun.14,2022

call dom.getBoundingClientRect () to get. 

// IE
//  
function intval(v) {
    v = parseInt(v);
    return isNaN(v) ? 0 : v;
}

function getPos(e) {
    // left and top value
    var left = 0;
    var top = 0;

    // offsetParent,html/body,.
    while (e.offsetParent) {
        // 
        left += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
        top += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);

        // body
        e = e.offsetParent;
    }

    left += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
    top += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);

    return {
        x: left,
        y: top
    };
}

document.addEventListener('mousemove', function(e) {
    // DOM
    console.log(getPos(document.querySelector('.footer')))
})

Previous: What are the advantages and disadvantages of transform animation and directly using left and top to change position?

Next: Why does the number add''to become a string type?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu