js距离大全

    var obj = document.getElementById("div")
    obj.addEventListener("click", e => {
        console.log(`鼠标相对于窗口左侧的距离-----${e.clientX}`)
        console.log(`鼠标相对于窗口顶部的距离-----${e.clientY}`)
        console.log(`鼠标相对于文档左侧的距离，包含被卷去的距离-----${e.pageX}`)
        console.log(`鼠标相对于文档顶部的距离，包含被卷去的距离-----${e.pageY}`)
        console.log(`鼠标相对于当前点击元素（e.target || e.srcElement）左侧的距离-----${e.offsetX}`)
        console.log(`鼠标相对于当前点击元素（e.target || e.srcElement）顶部的距离-----${e.offsetY}`)
    })
    console.log(`窗口区域宽：${ document.documentElement.clientWidth}`)
    console.log(`窗口区域高：${ document.documentElement.clientHeight}`)
    console.log(`文档全文宽：${ document.documentElement.scrollWidth}`)
    console.log(`文档全文高：${ document.documentElement.scrollHeight}`)
    console.log(`网页被卷去的高ie:${ document.body.scrollTop}`)
    console.log(`网页被卷去的高ff:${  document.documentElement.scrollTop}`)
    console.log(`网页被卷去的左:${ document.documentElement.scrollLeft}`)
    // 常用于弹出新窗口时，与当前窗口的偏移设置
    // 火狐请使用"window.screenX" 和 "window.screenY"。
    console.log(`浏览器窗口距离屏幕顶部的距离:${ window.screenTop}`)
    console.log(`浏览器窗口距离屏幕左侧的距离:${ window.screenLeft}`)

    console.log(`某个元素的宽度(padding+border+content):${ obj.offsetWidth}`)
    console.log(`某个元素的高度(padding+border+content):${ obj.offsetHeight}`)
    console.log(`返回当前元素的上边界到它的包含元素的上边界的偏移量:${ obj.offsetTop}`)
    console.log(`返回当前元素的左边界到它的包含元素的左边界的偏移量:${ obj.offsetLeft}`)
复制代码

转载于:https://juejin.im/post/5c6bb8556fb9a04a027aeb65