获取图片的位置（距离最顶部）

发布于

老规矩，先说需求：

需求是想要获取到图片的位置，然后根据图片的位置添加一个按钮

点击这个按钮 获取图片的信息

正常来讲 这样的需求 先获取dom 再遍历dom 往里面塞按钮就可以了

但是，考虑到各型各色的网站限制和dom变化，这样就有很多问题，

所以就需要根据图片的当前位置（元素距离顶部的位置（包括滚动条），和左边的位置）来动态的添加这个按钮

因为是hover触发的 所以这个按钮只有一个 （这样的做法是参考阿里以图搜图的功能做的）

ok 需求明白了之后 开始说怎么做

先说公式代码：（ top: 图片距离顶部的高度+滚动条的高度,left：图片距离左侧的高度）

1.滚动条的高度

代码语言：javascript
复制
    // 获取 当前 滚动条的长度， 水平 && 垂直方向
      function getScrollPosition() {
        let x, y;
        if (!!window.pageXOffset) {
          x = window.pageXOffset;
          y = window.pageYOffset;
        } else {
          x = (
            document.documentElement ||
            document.body.parentNode ||
            document.body
          ).scrollLeft;
          y = (
            document.documentElement ||
            document.body.parentNode ||
            document.body
          ).scrollTop;
        }
        return { x, y };
      }

2.图片距离上、左的距离：（主要方法：dom.getBoundingClientRect）

代码语言：javascript
复制
      // 获取 dom 到视口左侧和顶部的相对位置
      function getDomToViewPosition(id) {
        var dom = document.getElementById(id);
        let rectObject = dom.getBoundingClientRect();
        return {
          domToViewLeft: rectObject.left,
          domToViewTop: rectObject.top,
        };
      }

数据都拿到了之后 创建一个按钮 然后absolut 根据dom的位置 进行定位吧

举例看下面这张图：

这张例图的距离left为：20 距离上为：266.515625

当前滚动条的高度为：4683

按照我们的公式 我们动态添加的按钮的位置应该是：

top:4683+266.515625 = 4949.515625

left:20

接下来验证是否正确，方法就是看一下阿里以图搜图的按钮位置：

OK 几乎一样 验证成功，下课

附上参考的文档：https://www.cxyzjd.com/article/qq_35436516/101200912

里面会有实例，包括其它的一些跟距离相关的演示！

#dom#hover