HTML 요소의 위치 (X, Y) 검색하기

제가 JavaScript에서 img 및 div 와 같은 HTML 요소의 X 및 Y 위치를 얻는 방법을 알고 싶습니다.

답변 1

올바른 접근 방식은 element.getBoundingClientRect()를 사용하는 것입니다.

var rect = element.getBoundingClientRect();

console.log(rect.top, rect.right, rect.bottom, rect.left);

인터넷 익스플로러는 당신이 신경쓰는 동안 지원되어 왔으며, 결국 CSSOM Views에서 표준화되었습니다. 다른 모든 브라우저도 이를 채택했습니다.

일부 브라우저는 높이와 너비 속성도 반환하지만, 이는 비표준입니다. 이전 브라우저 호환성에 대해 걱정한다면이 답변의 개선된 우수한 구현을 위한 수정 사항을 확인하십시오.

element.getBoundingClientRect() 가 반환하는 값은 화면 보기와 관련이 있습니다. 다른 요소와 관련이 있게 하려면 간단히 두 개의 직사각형을 뺍니다.

var bodyRect = document.body.getBoundingClientRect(),

elemRect = element.getBoundingClientRect(),

offset = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from ');

답변 2

HTML 요소의 위치 (X, Y) 검색

HTML은 모든 웹 사이트의 기초입니다. 개발자는 HTML을 사용하여 웹 페이지 구조, 레이아웃 및 콘텐츠를 만듭니다. 그러나 때로는 특정 요소의 위치를 알아야 할 때가 있습니다. 이것은 자바스크립트와 같은 클라이언트 측 스크립트 프로그램에서 사용된다. 이것을 찾는 방법에 대해 알아보겠습니다.

HTML 요소 위치를 찾는 방법은 다양합니다. 이를 수행하는 가장 간단한 방법은 Javascript 코드로 요소의 position 속성을 검색하는 것입니다. 이 속성을 검색하면 개발자는 요소의 좌표(X, Y)를 알 수 있습니다.

또한 개발자는 HTML 요소를 찾기 위해 CSS 문법을 사용할 수 있습니다. 예를 들어, 요소를 CSS 선택자 인 ID를 사용하여 검색할 수 있습니다. CSS 속성을 검색하면 개발자는 요소의 위치를 확인할 수 있습니다.

반면 HTML 문서가보다 복잡한 경우, 요소를 찾기 위해 JavaScript를 사용해야 합니다. 일반적으로 getElementById, getBoundingClientRect, getComputedStyle 및 getElementsByTagName과 같은 메소드를 사용합니다.

마지막으로, 요소를 찾는 또 다른 방법은 대화식 도구를 사용하는 것입니다. 웹 브라우저의 개발자 도구를 사용하여 HTML 요소를 검색하고 CSS 및 JavaScript 코드를 사용하여 요소의 위치를 찾을 수 있습니다.

종합하면, HTML 요소의 위치를 찾는 방법은 많습니다. 이를 수행하는 가장 간단한 방법은 Javascript 코드로 요소의 position 속성을 검색하는 것입니다. 다른 방법으로는 CSS 문법, JavaScript 메소드, 대화식 도구 등이 있습니다. 이러한 방법은 모두 HTML 요소의 위치를 검색하는 좋은 방법입니다.

그러므로 HTML 요소의 위치를 검색하게 된다면 이러한 방법을 사용하여 찾아보시기 바랍니다. 이러한 방법을 사용하여 해당 요소의 위치를 쉽게 찾을 수 있으며, 이는 웹 페이지의 보다 나은 업그레이드와 개발을 할 수 있습니다.