Как получить пиксельные координаты элемента на экране компьютера

Question

Я хотел бы знать левое и верхнее положение элемента html на экране. Я пытался с этим кодом, который дает мне позицию элемента внутри документа:

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

но то, что я хочу знать, если есть функция, которая находит позицию на экране, или если есть способ узнать координаты этой точки на экране:

Спасибо заранее!

Answer 1

использование offset api

Получить текущие координаты первого элемента, или установить координаты каждого элемента в наборе соответствующих элементов, по отношению к документу.

вместо position координаты является относительно родительского элемента

Answer 2

вам нужно определить, что positon вы хотите найти topleft

проверки документация Position

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

Answer 3

Вы, вероятно, ищете Element.getBoundingClientRect() ,

Возвращаемое значение является объектом TextRectangle, который содержит только для чтения слева, сверху, справа и снизу свойства, описывающие границы окна в пикселей. вверху и слева относительно левого верхнего угла окна просмотра.

Например, это результат для вопроса элемента на не прокручивать страницы:

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 
}