首页 > 建站教程 > JS、jQ、TS >  js获取dom元素距离浏览器左边和顶部的距离正文

js获取dom元素距离浏览器左边和顶部的距离

jQuery提供了一个方法,可以获取dom元素距离浏览器左边和顶部的距离:

dom.offset().left
dom.offset().top


但是js的 offsetLeft 和 offsetTop 只能获取相对定位的父元素的距离,并不能直接获取距离浏览器的距离,所以,要循环遍历,依次从内到外加上即可:

function getOffsetLeft(dom){
  let offsetLeft = 0;
  do {
    offsetLeft += dom.offsetLeft
    dom = dom.parentNode
  } while (dom.parentNode)
  return offsetLeft
}


使用方法:

const offsetLeft = getOffsetLeft(document.querySelector('.line'))