여백이있는 본문 요소의 왼쪽 및 위쪽 오프셋 가져 오기 : 자동

본문 요소의 크기가 고정되고 가운데 맞춤되어있는 웹 사이트에 대해 마우스 기준 위치 (즉, 본문 = 좌표 원점)를 가져 오려고합니다 margin : auto CSS 속성을 사용합니다.여백이있는 본문 요소의 왼쪽 및 위쪽 오프셋 가져 오기 : 자동

event.clientX 및 event.clientY 특성은 본문 요소가 아닌 페이지 시작 부분에서 오프셋을 제공하므로 필자는 본문 오프셋을 빼내려고했습니다. 이렇게하려면 document.body.offsetLeft & document.body.offsetTop을 사용해 보았습니다.하지만 지금까지 행운은 없었습니다. 값은 정의되지 않았습니다. 또한 정의하지 않았으므로 document.body.style.left 또는 document.body.style.top을 사용할 수 없습니다.

누구나 시체 오프셋을 얻는 방법을 알고 있거나 DOM 요소에 상대적으로 마우스 좌표를 직접 가져올 수 있습니까?

미리 감사드립니다.

출처

2012-04-30 gaspercat

사용 element.getBoundingClientRect()은 요소의 상대적 오프셋을 얻을 수 있습니다 :

var bodyOffsets = document.body.getBoundingClientRect(); 
//bodyOffsets.top ; 
//bodyOffsets.left ;

출처

2012-04-30 12:19:37

안녕하세요. : P 렌더링 위치를 직접 가져올 수 있다는 것을 몰랐습니다. 이제 전체 계층 구조를 반복하여 몸체와 관련된 위치를 계산하는 것이 어리 석다. – gaspercat

@ gaspercat 일관성있는 크로스 브라우저 솔루션에 대해서는 [이 답변] (http://stackoverflow.com/a/8111175/)을 참조하십시오. 938089). –

오프셋 부모를 기준으로 현재 위치를 검색하는 Jquery 메서드 position()을 사용합니다.

출처

2012-04-30 12:19:19 jumancy

그것은 좋은 옵션을 보인다. 나는 그것을 염두에 두겠다.하지만이 경우에는 프로젝트의 다른 곳에서는 Jquery를 사용하지 않는다. – gaspercat

여백이있는 본문 요소의 왼쪽 및 위쪽 오프셋 가져 오기 : 자동

답변

관련 문제