如何在计算机屏幕上获取元素的像素坐标

Question

我想知道屏幕上html元素的左侧和顶部位置。 我尝试使用这段代码，它给出了文档中元素的位置：

var position = $('#elem').position();

但我想知道是否有一个功能可以找到屏幕上的位置，或者是否有办法知道屏幕上这个点的坐标：

提前谢谢！

Answer 1

使用offset api

获取第一个元素的当前坐标，或者在匹配元素集中相对于文档设置每个元素的坐标。

而不是position坐标相对于父元素

Answer 2

您需要定义要查找的位置top left

检查文档Position

var position = $('#elem').position();
alert(position.left + ' ' + position.top)

Answer 3

您可能正在寻找Element.getBoundingClientRect()。

  

返回的值是一个TextRectangle对象，它包含只读   左，上，右和底属性描述了边框   像素。 top和left相对于视口的左上角。

例如，这是未滚动页面上的问题元素的结果：

document.querySelector("#question").getBoundingClientRect()

{
    "height": 633,
    "width": 728,
    "left": 431.5,
    "bottom": 844,
    "right": 1159.5,
    "top": 211
}

有点滚动：

{
    "height": 633,
    "width": 728,
    "left": 431.5,
    "bottom": 10,
    "right": 1159.5,
    "top": -623
}