컴퓨터 화면에서 요소의 픽셀 좌표를 얻는 방법

Question

화면에서 html 요소의 왼쪽 및 위쪽 위치를 알고 싶습니다. 나는 나에게 문서 내부 요소의 위치를 ​​제공이 코드로 시도 :

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

하지만 내가 원하는 것은 화면의 위치를 ​​찾아, 또는이 경우 함수가 있는지 알고있다 화면상의이 점의 좌표를 알 수있는 방법 :

미리 감사드립니다!

Answer 1

사용 offset api

첫번째 요소의 현재 좌표를 취득하거나, 문서에 대하여 정합 소자들의 세트에서, 모든 요소의 좌표를 설정.

대신 position 좌표

Answer 2

당신이 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 
} 

예를 들어

,이되지 스크롤 페이지에 질문 요소에 대한 결과입니다